Merhaba arkadaşlar şimdi dikey menü yapımını birlikte inceleyeceğiz.
İlk önce Body Tagları arasına Liste Elemanlarımızı Yerleştirelim :
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
Menü divine CSS ile yükseklik ve genişlik verelim :
#menu { height: 50px; //Yükseklik width: 800px; //Genişlik }
Menü içerisindeki ul’nin margin ve padding’ini Sıfırlıyalım, Başındaki İşaretleri Kaldıralım :
#menu ul {
list-style-type: none; //Liste Sitilini Temizler
margin: 0px; //Dış Boşluk
padding: 0px; //İç Boşluk
}
Gereken Özellikleri Verelim :
#menu ul li a { color: #000; //Yazı Rengi text-decoration: none; //Alt Çizgiyi Kaldırır font-weight: 500; //Harfler Arası Boşluk font-family: Verdana, Geneva, sans-serif; //Yazı Font'u background-color: #06F; //Arka Plan Rengi text-align: center; //Yatayda Ortalama display: block; //Menüyü Düğme Haline Getirir height: 50px; //Menü Yüksekliği width: 200px; //Menü Genişliği line-height: 50px; //Dikeyde Ortalama }
Üzerine Gelindiğinde Alınacak Hal :
#menu ul li a:hover {color: #fff; //Yazı Rengi text-decoration: none; //Alt Çizgiyi Kaldırır font-weight: 500; //Harfler Arası Boşluk font-family: Verdana, Geneva, sans-serif; //Yazı Font'u background-color: #09F; //Arka Plan Rengi text-align: center; // Yatayda Ortalama display: block; //Menüyü Düğme Haline Getirir height: 50px; //Menü Yüksekliği width: 200px; //Menü Genişliği line-height: 50px; //Dikeyde Ortalama font-size: 18px; //Yazı Boyutu }
Bir sonraki yazımızda görüşmek üzere…