CSS ile Menü Yapmak I - Dikey Menüler

[gokhanaygun]

Web sitelerinin vazgeçilmez öðelerinde biridir menüler. Menüler kullanýcýnýn oluþturduðumuz sayfalara hýzlý eriþimini saðlar. Bir çok site de Ürünler, Ýletiþim, Hakkýmýzda vb. bölümlerini menü öðesi olarak görürüz. Bu makalede sýrasýz listeler(<ul>)ve CSS yardýmý ile menü yapýmýný anlatacaðýz. CSS ile yapýlan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.

Sýrasýz listeler(<ul>) ilk olarak listeleme iþlemleri için kullanýlsa da CSS’in yükseliþi ile birlikte menü oluþturmak için kullanýlmaya baþlandý. Aslýnda menülerde bir bakýma link listeleri olduðu düþünülürse iþlevinin dýþýnda kullanýlmadýðý da doðru bir tespittir. Kodumuzu yazmaya baþlayalým:

<ul class="menu">
<li><a href="index.html">Ana Sayfa </a></li>
<li><a href="hakkimizda.html">Hakkýmýzda</a></li>
<li><a href="urunler.html">Ürünler</a></li>
</ul>
Kodlama sonucu görüntü aþaðýdaki gibi olacaktýr.



Her linkin baþýndaki imgeleri kaldýrmak için:

ul.menu { list-style-type: none; }


Bir çok web tarayýcýsý sýrasýz listeleri(<ul>) yorumlarken yukarýda görüldüðü gibi otomatik olarak soldan bir padding/margin(bazý tarayýcýlarda padding uygularken bazýlarýnda margin uygular) mesafesi uygular bu mesafeyi sýfýrlamak için:

ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}


Bu bölüme kadar yazýlan kodlamalar hem dikey menüler hem de yatay menüler içinde aynýdýr. Ancak bundan sonra dikey menü ve yatay menü için kodlar deðiþecektir.

Dikey Menüler
Dikey menülerde linkler yukarýdan aþaðý doðru sýralanmýþtýr. Link elementi(a) inline-elementtir, her linke rollover özelliði kazandýrmak için:

ul.menu a { display: block; }
Biraz görselliði arttýrýrsak:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
}


Linkler web tarayýcýsýnýn geniþliði kadar uzayacaktýr, kendi istediðimiz geniþliðe sahip olmak için:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
}


Linkler arasýna biraz boþluk verelim:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
}


Linklerin altýndaki çizgileri kaldýralým:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
text-decoration: none;
}


þžimdi linklerimize rollover efekti vermek için a:hover kullanacaðýz:

ul.menu a:hover
{
background-color: #999;
}


son olarak linklerin arasýný ayýralým:

ul.menu li { margin: 0 0 .2em 0; }
Ýþte menümüzün son hali