kanalbizim.tr.gg | Chat,Sohbet,Sohpet,Kızlarla Sohbet

CSS dikey menu

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:
Linklerimizi yazıyoruz.

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.

1-Adım Her linkin başındaki imgeleri kaldırmak için:

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

2-Adım 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

3-Adım 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; }

4-Adım Biraz görselliği arttırırsak:

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

5-Adım 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. }

6-Adım 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. }

7-Adım 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. }

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

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

9-Adım son olarak linklerin arasını ayıralım:

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

Yukarıdaki bilgileri Bedava-Sitem e uygulayalım;

7.Adım,8.Adım,9.Adımlarımda verilen kodları 
Gelişmiş ayarlar sekmesinden Css kodu bölümüne yapıştırıyoruz.
İlk sırada verilen linkleride tasarımın üzerindeki yazı veya tasarımın altındaki yazı kısımlarına yapıştırıyoruz.