Animasyonlu HTML Menü Kodu (MATERYAL) by Kod Dostu on 8/18/2014 10:40:00 ÖÖ animasyonlu, hazır kod, koddostu, materyal tasarım, menü, menü kodu, sitene ekle adfxq yayınaef son ..xva baslikntd urlname Reklam Google'ın getirdiği materyal tasarım anlayışıyla, animasyonlar ve geçiş efektleri sitelerin ve uygulamaların vazgeçilmezi haline geliyor. Bu düşey menü kodumuz sayesinde sitenize animasyonlu bir üç çizgi menüsü ekleyebilirsiniz. Tek yapmanız gereken kodu dilediğiniz yere eklemek ve google.com tarzı linkleri kendi sayfa linklerinizle değiştirmek. Kodu sitenizin sağ üst köşesine eklerseniz daha çok işe yarayacaktır. Ayarlar Hazır kodun ilk satırlarında sayfa adlarını ve ilgili linkleri bulacaksınız. Örneğin: <a href="http://google.com/iletisim.html">İletişim</a> Bu kodlarda ilgili linki ve sayfa ismini, kendi sitenizdeki sayfa isimleri ve linklerle değiştirmenizi öneririz. AyarlarÖnizlemeyi Görmek İçin Tıklayın <!-- Koddostu Animasyonlu HTML Menü Kodu START --> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <div id="koddostu-materyalmenu"><p> <a href="http://google.com/">Ana Sayfa</a> <a href="http://google.com/kategoriler.html">Kategoriler</a> <a href="http://google.com/iletisim.html">İletişim</a> <a href="http://google.com/hakkimizda.html">Hakkımızda</a> <a href="http://www.koddostu.com/">Hazır Kodlar</a> </p> <b onclick="this.parentNode.className='';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6 6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g></svg></b> <div onclick="this.parentNode.className='acbakalim';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></div></div><style> #koddostu-materyalmenu{position:relative;width:32px;height:32px;overflow:visible;z-index:4000;transition:all 0.25s ease-in;text-align:left;} #koddostu-materyalmenu div, #koddostu-materyalmenu b{cursor:pointer;margin:0 0 0 0;padding:0 0 0 0;position:absolute;top:4px;right:4px;display:inline-block;width:24px;height:24px;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:all 0.25s ease-in;-webkit-transition:all 0.25s ease-in;} #koddostu-materyalmenu b{width:24px;height:24px;opacity:0;} #koddostu-materyalmenu p{ display:inline-block; overflow:hidden;width:0px;height:0px;position:absolute;top:0px;left:0px;background:#fff; margin:0 0 0 0; padding:0 0 0 0; transition:all 0.25s ease-in; } .acbakalim p{ width:200px !important; height:210px !important; padding:30px 0 0 0 !important; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; } #koddostu-materyalmenu p a{text-decoration:none !important; font-family:Arial, sans-serif; font-size:14px; color:#455ede; padding-left:15px; display:block; height:40px; line-height:40px; width:200px; } #koddostu-materyalmenu p a:hover{ background:#d0d9ff; } .acbakalim b{ transform:rotate(270deg) !important; -webkit-transform:rotate(270deg) !important; opacity:1 !important; } .acbakalim div{ transform:rotate(360deg) !important; -webkit-transform:rotate(360deg) !important; opacity:0; width:1px !important; height:1px !important; } </style> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!-- Koddostu Animasyonlu HTML Menü Kodu STOP --> <!-- Koddostu Animasyonlu HTML Menü Kodu START --> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <div id="koddostu-materyalmenu"><p> <a href="http://google.com/">Ana Sayfa</a> <a href="http://google.com/kategoriler.html">Kategoriler</a> <a href="http://google.com/iletisim.html">İletişim</a> <a href="http://google.com/hakkimizda.html">Hakkımızda</a> <a href="http://www.koddostu.com/">Hazır Kodlar</a> </p> <b onclick="this.parentNode.className='';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6 6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g></svg></b> <div onclick="this.parentNode.className='acbakalim';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></div></div><style> #koddostu-materyalmenu{position:relative;width:32px;height:32px;overflow:visible;z-index:4000;transition:all 0.25s ease-in;text-align:left;} #koddostu-materyalmenu div, #koddostu-materyalmenu b{cursor:pointer;margin:0 0 0 0;padding:0 0 0 0;position:absolute;top:4px;right:4px;display:inline-block;width:24px;height:24px;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:all 0.25s ease-in;-webkit-transition:all 0.25s ease-in;} #koddostu-materyalmenu b{width:24px;height:24px;opacity:0;} #koddostu-materyalmenu p{ display:inline-block; overflow:hidden;width:0px;height:0px;position:absolute;top:0px;left:0px;background:#fff; margin:0 0 0 0; padding:0 0 0 0; transition:all 0.25s ease-in; } .acbakalim p{ width:200px !important; height:210px !important; padding:30px 0 0 0 !important; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; } #koddostu-materyalmenu p a{text-decoration:none !important; font-family:Arial, sans-serif; font-size:14px; color:#455ede; padding-left:15px; display:block; height:40px; line-height:40px; width:200px; } #koddostu-materyalmenu p a:hover{ background:#d0d9ff; } .acbakalim b{ transform:rotate(270deg) !important; -webkit-transform:rotate(270deg) !important; opacity:1 !important; } .acbakalim div{ transform:rotate(360deg) !important; -webkit-transform:rotate(360deg) !important; opacity:0; width:1px !important; height:1px !important; } </style> <!--Telif sahibi:koddostu.com--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!-- Koddostu Animasyonlu HTML Menü Kodu STOP --> Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: