Kod

Sol Açılan Menü Kodu

Hakan İnan 17 Mart 2019

0 10 1 dakika okuma süresi

Mouse ile Üzerine Tıklayınca Açılan Basit Sade Menü Kodu

Sitenizin kendi menüsü hoşunuza gitmeyebilir veya ekstra menü eklemek istiyorsunuz bu kodla istediğiniz kadar menü oluşturabilirsiniz üstelik kullanımı çok kolay alttaki kodu kopyalayın head etiketleri arasına yapıştırın. Sonra da eklemek istediğiniz menü bağlantılarını ekleyin.

<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>

<script src="http://www.koddostu.com/duzelt.js?no=77"></script>

Örnek olarak yazılan linkleri değiştirin ve kullanmaya başlayın. Önizleme için aşağıda verdiğim resme bakabilirsiniz.