CSS ile Menü Yapmak IV - Yatay Açýlýr Menüler
 

Bir önceki makalede dikey açýlýr menüleri gördük. Bu makalede yatay açýlýr menülere bir örnek vereceðiz. Html kodumuz ayný olsun

<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. Dikey menüde olduðu gibi.

ul#menu, ul#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
Daha sonra menümüzü yatay hale getirmek için float özelliðini kullanalým. Normalda bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II - Yatay Menüler) 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.

Göreceli olarak konumlandýrýlmýþ(postion:relative) bir elementin içindeki Mutlak Konumlandýrýlmýþ(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sað,sol ve alttýndan hizalandýralabilir. Bu kullaným bize bir çok uygulmada yardýmcý olacaktýr ve bu kullaným ile çok güzel sonuçlar elde edeceðiz.

CSS ile konumlandýrma(positioning)

ul#menu li {
float: left;
position: relative;
width: 150px;
}
Sonra ikincil linkleri sayfaya ilk açýldýðýnda görünmez(display:none) yapalým. Birincil linklere göre konumlandýrmak için postion:absolute özelliði ve top:19px (satýr yüksekliði 15px + 2px alttan(sonra ekleyeceðiz) + 2px üstten(sonra ekleyeceðiz)) özelliðini kullanalým.

ul#menu li ul {
display: none;
position: absolute;
top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
left: 0;
}
Yalnýz burada IE sorun çýkaracaktýr. IE ve Opera ikincil menüleri konumlandýrmasýnda sorun çýkarýr, bunu engellemek için:

ul#menu li > ul {
top: auto;
left: auto;
}


Görünümü biraz güzelleþtirelim:

ul#menu li a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000;
background: #efefef;
text-decoration: none;
}
ve rollover hali için:

ul#menu li a:hover {
color: #a00;
background: #fff;
}
Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:

ul#menu li:hover ul { display: block; }
Önceki makalede belirttiðimiz gibi bu kod IE’de çalýþmayacaktýr. IE’de çalýþmasý için aþaðýdaki kodlarý yazmalýyý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;
Ayrýca aþaðýdaki kodu da eklemeliyiz.

ul#menu li:hover ul, ul#menu li.over ul{ display: block; }
Önemli bir not olarak koddaki <ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); ayný olmasýna dikkat edelim.

iþte sonuç:


þimdiye kadar anlatýlan menü kodlarýnda iþin yapýsý öðretilmeye çalýþýlmýþtýr. Bu kodlarý kullanarak çok çeþitli menüler yapýlabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu þekilde tasarlanabilir. alt kademeli, deðiþik renklerde ve deðiþik ebatlarda menü yapýlabilir.

paylaşım için sağol

paylaşım için tşkler