Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayýcýsý tarafýnda desteklenen(IE6 ve öncesi dahil) açýlýr menü yapýlabilir. Aslýnda javascript’e ihtiyaç olmamasýna karþýn IE7′den önceki sürümler için javascript kodu gerekmektedir.
Açýlýr menü yapmak için daha önceki menü örneklerinde olduðu gibi sýralanmamýþ listeleri(<ul>) kullanacaðýz. Buradaki fark alt kategorilerin yani üzerine gelince açýlacak menünün bir alt sýrlanmýþ liste olarak eklenmesidir.
<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">þžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dýþý Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul> <li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>
Ýlk olarak satýr baþý boþluklarýný ve imgeleri kaldýralým.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
Sonra ilk linkleri göreceli olarak konumlandýrmalýyýz. Bu konumlandýrma aslýnda ikinci kademe açýlacak menüye mutlak konumlandýrma yapýlmasý için kullanýlýr.
ul li {
position: relative;
}
Bir sonraki adýmda da ikincil açýlan menüleri konumlandýrmak olacaktýr. Her birinci linke karþýlýk gelen ikincil açýlýr menüler ilkinin saðýna konumlandýrýlmalýdýr. Bunun için soldan 149px deðeri verilir. 1 piksel sola kaydýrýlýr ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasýn. Ayrýca ikincil linklerin ilk sayfa açýldýðýnda görünmemesi için display:none özelliði atanýr.
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
Açýlýr menü yapýsýný oluþturmuþ olduk þimdi linkleri güzelleþtirip menü haline getirmek için önceki menüleri yaparken uyguladýðýmýz kodlarý uygulayalým. Linklerin kendine has alanlarýný tanýmlamak için display:block özeliðini kullanalým. Linklerin altýndaki çizgiyi kaldýrmak için text-decoration:none özelliðini kullanalým. Linkler arasýna mesafe vermek için padding verelim. Birde bir zemin rengi tanýmý ver kenarlýk tanýmý yapalým. Üstteki linkin alt kenarlýðý ile alttaki linkin üst kenarlýðý üst üste bineceðinde alt kenarlýk deðerini sýfýrlayalým.
ul li a {
display: block;
text-decoration: none;
background-color: #E2E2E2;
padding: 5px;
border:1px solid #000;
border-bottom:0;
}
Bu kodu yazdýðýmýzda IE linkler arasýna boþluk koyacaktýr(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:
/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */
En alttaki çizgimiz eksik kalmamasý için ilk link ul’sinin alt kenarlýk taným yaparýz.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00;
}
Birincil menü görünümü tamamlandý ancak ikincil menüler görünmüyor. Ýkincil menüleri göstermek için:
li:hover ul { display: block; }
Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7′den öncesi bu kodu desteklemez.
Internet Explorer 7. versiyonuna kadar :hover pseudo sýnýfýný sadece linklerde (<a>) uygulanmasýný destekler diðer elementlerde bu özelliðin kullanýmýný desteklemez.
Peki menümüz böyle mi kalacak hayýr. IE6 ve altý için bir javascript kodu yazacaðýz.
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Bu çözümü bize kazandýran arkadaþlara teþekkürü bir borç biliriz ve linkini de yazarýz.
Ayrýca aþaðýdaki kodu da eklemeliyiz.
li:hover ul, li.over ul{ display: block; }
Ayrýca kod daki<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); ayný olmasýna dikkat edelim.