Web Gemisi Web Tasarımın Yardımcı Koçu
İlgili Yazılar
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…
