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

	<ul>
		<li><a href="">Deneme</a></li>
		<li><a href="">Deneme</a>
			<ul>
				<li><a href="">asdasd</a></li>
				<li><a href="">fasdfasdf</a></li>
				<li><a href="">asdfasdf</a></li>				
			</ul>
		</li>
		<li><a href="">Deneme</a></li>
		<li><a href="">Deneme</a>
			<ul>
				<li><a href="">sdafasgdasdf</a></li>
				<li><a href="">sdgsadf</a></li>
				<li><a href="">sdfsdfasd</a></li>				
			</ul>
		</li>
		<li><a href="">Deneme</a></li>												
	</ul>

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.

    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}

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

 $(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");
        });
    });

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

  • http://nezihdarcin.spaces.live.com Nezih Darçın

    Merhabalar, değerli paylaşımınız için teşekkür ederim. Benim sorum: vermiş olduğunuz kodları ve uygulamayı WordPress içinde nasıl kullanabilirim? Yani yeni bir .TXT açarak onun içine mi yapıştıracağım? yardımcı olursanız eğer sevinirm (: Teşekkür edeirm

    Nezih

  • http://a apoStyLEE

    Merhabalar, öncelikle ilginize teşekkür ederim. Örnekteki çalışmayı wp de nasıl kullanabilirsiniz inanın bilmiyorum :) Wp’ den anlayan insanlara sormak lazım, ben gram anlamıyorum :) kolay gelsin..

  • mesut

    kardeş paylaşım için teşekkürler fakat bu kodları alıp yapıştırmama rağmen çalışmadı menü.. saçma bir sonuç ortaya çıktı.. çalışan halini örneğe ekleyebilir misin ?