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:

1. <ul class="menu">
2. <li><a href="index.html">Ana Sayfa </a></li>
3. <li><a href="hakkimizda.html">Hakkımızda</a></li>
4. <li><a href="urunler.html">Ürünler</a></li>
5. </ul>

Kodlama sonucu görüntü aşağıdaki gibi olacaktır.

Her linkin başındaki imgeleri kaldırmak için:

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

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }

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:

1. ul.menu a { display: block; }

Biraz görselliği arttırırsak:

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

Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:

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

Linkler arasına biraz boşluk verelim:

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

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

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

şžimdi linklerimize rollover efekti vermek için a:hover kullanacağız:

1. ul.menu a:hover
2. {
3. background-color: #999;
4. }

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

1. ul.menu li { margin: 0 0 .2em 0; }

İşte menümüzün son hali

Kaynak www.fatihhayrioglu.com/