basityataymenuyapimi

Basit Yatay Menü Yapımı

 Daha önce dikey olarak nasıl menü yapacağımızı sizlere anlatmıştım, şimdi dikey menü yapalım.

Örnek:



Gerekli Görseller:

   

Şimdi CSS kodlarını yazalım.
Önceki menüde yaptığımız gibi öncelikle bunda da bir katman içerisinde ul ve li elemanlarımızı tanımlayacağız. (Siz bir katman içerisinde tanımlamak zorunda değilsiniz.)

ul elemanı için stil kodumuzu tanımlayalım, burada önemli olarak standart liste yönteminin başındaki madde işaretlerini kaldıracağız ve menümüzün ana arkaplan ve genişliği gibi tanımlamalarda bulunacağız.

#yataymenu ul { 
width: 620px; 
height: 40px; 
list-style:none; 
background: url(/yataymenubg1.png); 
font-family: Arial; 
font-size;15px; 
margin: 0; 
padding: 0; }

Şimdi li elemanı için gerekli tanımlamaları yapalım. Burada ise önemli olarak liste elemanlarının nasıl hizalanacağını belirlemek menümüz yatay olacağı için aynı çizgide display komutu ile yan yana hizalamalıyız. Ayrıca sola dayalı bir menü olacağından float komutuyla sola dayamamız gerekmektedir.

#yataymenu li a { 
width: 124px; 
height:30px; 
padding-top: 10px; 
padding-left: 10px; 
float:left; color:#fff; 
text-decoration:none; 
display:inline; }

Not: Normalde arkaplan 40px yüksekliğinde ancak padding-top değeri verdiğimiz için height değerinden 10px sildik.

Şimdi menü liste elemanlarının üzerine fare imleci getirildiğinde nasıl bir stil ile karşılacağını hove ile ayarlıyoruz.

#yataymenu li a:hover { 
background: url(/yataymenubg2.png); 
font:12px; 
color: #ffbd1e; }

HTML kodu:

<div id="yataymenu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>