CSS ile Menü Yapmak

Websitesi yaparken en çok kullanılan kod hiç şüphe yok ki Css kodları. Css ile yapılan menülerin hemen hemen her websitesinde görülebilecek kısımlar olduğu şüphesiz. Menüler sayesinde oluşturulan sayfalara hızlı erişimin sağlanması, websitelerinde menüleri olmazsa olmaz kılmakta. Bu makalede, sırasız listeler ve css ile menü yapımı hakkında dilimiz döndüğünce bilgiler vermeye çalışacağız.
Sırasız listeler(<*ul>) ilk zamanlarda listeleme işlemleri için kullanılmaktaydı. Fakat, CSS’nin yükselişi ile birlikte menü oluşturmak için kullanılmaya başladı. Menülerinde bir tür link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da söylenebilir.

<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>

Kodlamanın sonucu bu şekilde olacaktır:

Linklerin başlarındaki noktaları kaldırmak isterseniz uygulamanız gereken css kodu:

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

Kodlamanın sonucu bu şekilde olacaktır:

Bazı tarayıcılar sırasız listeleri yorumlarken soldan padding veya margin mesafesi uygular (sol tarafta oluşan boşluktan bahsediyoruz.) Bu mesafeyi sıfırlamak için uygulayacağınız kod:

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

Kodlamanın sonucu bu şekilde olacaktır:

İster yatay menü yapın, isterseniz dikey menü yapın, buraya kadar uygulamanız gereken kodlar aynıdır. Kodlamanın iskeleti diyebiliriz buraya kadarki kısma. Bundan sonra yapmanız gerekenlere göz atalım.

Dikey Menüler:

Dikey menülerde listeler yukarıdan aşağı doğru sıralanır. Dilerseniz linklere rollover özelliği ekleyelim. (Rollover: fare hareketiyle değişen menü)

ul.menu a { 
    display: block; 
}

Menüye biraz da görsellik katalım:

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

Kodlamanın sonucu bu şekilde olacaktır:

Bu şekilde yapılan kodlamada, linklerin uzunluğu, sayfanızın boyu ne kadarsa o kadar geniş olacaktır. Bunu kendimize göre düzenlemek için:

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

Kodlamanın sonucu bu şekilde olacaktır:

Linklerin arasına “çizgi şeklinde” boşluk eklemek isterseniz:

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

Kodlamanın sonucu bu şekilde olacaktır:

Linklerin altındaki “çizgileri kaldırmak” isterseniz:

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

Kodlamanın sonucu bu şekilde olacaktır:

Linklerimize “rollover efekti” vererek görsel açıdan biraz daha zenginleştirelim:
(bu işlemi a:hover kodu ile yapacağız)

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

Kodlamanın sonucu bu şekilde olacaktır:

Aşağıdaki kod yardımıyla da linklerimizin arasını ayırırsak işlemimiz tamamlanacaktır:

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

Kodlamanın sonucu bu şekilde olacaktır:

Bu yazımızın ardına herkese birbirinden güzel menü yapmak kalıyor artık. 😉

“CSS ile Menü Yapmak” 5 yorum yapıldı.

Yorum Yapın

Şüphe vereni terket şüphesiz olana bak. (H.Ş.)