Merhaba Webkolog takipçileri, bugün sizlere web sitelerinizde rahatlıkla kullanabileceğiniz, katman sınırı olmadan uzayıp gidebilen sınırsız bir alt menü (unlimited submenu) yapısını jQuery ve CSS yardımıyla nasıl kolayca oluşturabileceğinizi anlatacağım.

Web projelerimizde bazen kategoriler ve alt kategoriler iç içe geçebilir. Özellikle geniş içerikli sitelerde standart menüler yetersiz kalabiliyor. Bu gibi durumlarda, kaç seviye derine inilirse insin sorunsuz çalışan bir CSS ve jQuery altyapısına ihtiyaç duyarız. Ben de kendi çalışmalarımda sıklıkla başvurduğum bu pratik yöntemi sizlerle paylaşmak istedim.

1. HTML Yapısının Hazırlanması

Menümüzü oluştururken sıralı liste (ol) ve sırasız liste (ul) etiketlerini iç içe kullanarak hiyerarşik bir düzen elde ediyoruz. Alt menüsü olan liste elemanlarına (li) özel bir sınıf vererek jQuery tarafında onları kolayca yakalayacağız.

İşte temel HTML yapımız:

<ol>
	<li>Ana Sayfa</li>
	<li>Hakkımda</li>
	<li class="submenu">
		Hizmetler
		<ul>
			<li>Web Tasarımı</li>
			<li class="submenu">
				Grafik Çalışmaları
				<ul>
					<li>Kurumsal Kimlik</li>
					<li>Logo Tasarımı</li>
				</ul>
			</li>
			<li>Yazılım Geliştirme</li>
		</ul>
	</li>
	<li>İletişim</li>
</ol>

2. CSS ile Görünüm ve Alt Menüleri Gizleme

CSS tarafında menümüzün temel boyutlarını ve renklerini belirliyoruz. Burada kritik nokta; ana listenin altındaki iç alt menüleri (ol ul) varsayılan olarak görünmez yapmaktır (display: none;). Böylece ziyaretçi fareyle üzerine gelene kadar alt kategoriler gizli kalacaktır.

Kullanacağımız stil kodları:

ul, ol {
	border: 1px solid #000;
	list-style: none;
	padding-left: 0px;
	width: 200px;
}
li {
	background-color: #c0c0c0;
	margin: 1px;
	cursor: pointer;
}
li:hover {
	background-color: #ff0;
}
ol ul {
	display: none;
}

3. jQuery ile Etkileşim Kazandırma

Son aşamada jQuery kütüphanesini sayfamıza dahil ederek menümüze hareket veriyoruz. Fare, alt menüsü olan bir elemanın üzerine geldiğinde (hover), ilgili elemanın hemen altındaki ilk ul etiketini show() fonksiyonu ile görünür yapıyoruz. Fare alandan uzaklaştığında ise tüm açılan alt menüleri hide() ile tekrar gizliyoruz.

JavaScript / jQuery kodlarımız:

$(function() {
	$('li.submenu').stop().hover(
		function() {
			$(this).parent().find("ul:first").show(); 
		},
		function(){}
	);
	
	$('li.submenu').parent().stop().hover(
		function(){},
		function() {
			$(this).parent().find("ul").hide();
		}
	);
});

Gördüğünüz gibi oldukça sade ama bir o kadar da etkili bir yöntemle, sitelerinizde dilediğiniz derinlikte alt menüler oluşturabilirsiniz. Takıldığınız bir nokta veya sormak istediğiniz sorular olursa yorum kısmından bana yazabilirsiniz.

Hepinize sağlıklı, mutlu ve huzurlu günler dilerim!

Webkolog'u takipte kalın!