Koddostu

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.

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.

<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Animasyonlu HTML Menü Kodu (MATERYAL)-->
<!-- 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 -->
<script src="https://www.koddostu.com/duzelt.js?no=77"></script>