Anasayfa / Web Tasarım / Css / Css ile Dikey Menü Yapımı

Css ile Dikey Menü Yapımı

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…

Hakkında

Check Also

web-gemisi

CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

Nitelik Seçicileri Html etiketlerinin istenen parametresinin istenen değere sahip olduğu durumlarda css kodlarının devreye girmesini …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir