jQuery ile yatay açılır menü yapımı (horizontal menu)
Sürekli site açılış haberi verecek değilim :) Şimdi ki yazımda jQuery ve css ile basit bir yatay açılır menünün nasıl yapılacağına göz atacağız. Başlangıç noktasında ul ve li etiketlerinden bir hiyerarşi yaratıyoruz. Eğer kodumuza bakarsak yapıyı rahatlıkla anlayabiliriz, bir nevi ağaç yapısı.
[html]
[/html]Sonrasında css ile birlikte biçimlendirmemizi yapıyoruz. Buradaki önemli olan nüans ikinci seviyedeki ul etiketlerini display:none yaparak ilk etapta görünmemesini sağlamak sonrasında da position:absolute ile pozisyonunu sabitliyoruz.
[html] body{font-family:Verdana,Helvetica;font-size:11px;background-color:#333} .menu{} .menu ul{list-style:none;padding:0;margin:0} .menu ul li{float:left;padding:5px;margin:2px;} .menu ul li a{color:White;text-decoration:none;font-weight:bold;} .menu ul li:hover{background-color:#5a5a5a} .menu ul li ul{display:none;position:absolute;} .menu ul li ul li{float:none;border-bottom:1px solid #ededed} .menu ul li ul li:hover{border-bottom:1px solid #5a5a5a;background-color:Transparent} [/html]
En son işlem olarak da jQuery ile üzerine gelinen li nin altında bulunan ul nin görünmesini sağlamak. Neden bu ul görünmüyordu çünkü css de displayını none yapmıştık ;) Koda baktığımızda gayet basit bir mantığın olduğunu göreceksiniz. Daha değişik açılma efektleri için jQuery' nin efekt kategorisine göz atabilir ve rahatlıkla uygulayabilirsiniz. Burada aklıma gelmişken projenize jquery.js yi eklemeyi unutmayın ;)
[html] $(document).ready(function() { $("#menu1 ul li").hover( function() {//mouse üzerindeyken çalışacak fonksiyonumuz. (mouseover) $("ul", this).slideDown("fast"); }, function() {//mouse üzerinde değilken çalışacak fonksiyonumuz. (mousout) $("ul", this).slideUp("fast"); }); }); [/html]
Aşşağıda ki örneklerde menülerin farklı şekillerde nasıl çalıştığını görebilir ve kaynağı görüntüleyerek kodları alabilirsiniz. Bir yazının daha sonuna geldik, kalın sağlıcakla..