CSS

Yatay Menü Yapımı

9 yıl önce
3 Yorum
yazan Hayri

Daha önceki yazılarda menülerin sitenin en önemli parçası olduğundan bahsetmiştim. Bu yazıda tab görünümlü yatay menü nasıl oluşturulacağız.

http://www.yazilimbilisim.net/web/css/css-menu-yapimi/ bağlantısından önceki yazyı inceleyebilirsiniz.

Gelelim yatay menüyü adım adım nasıl oluşturacağımıza;

DEMO

Adım 1: Yatay Menünün HTML kodları

Sayfada birden fazla menü olması duruma karşın id değeri yatay-menu olarak tanımladık. Standart bir menü ul li a etiketleri ile oluşturulmaktadır. Bu kurala uygun olarak aşağıdaki şekilde HTML etiketleri oluşturulmuştur.

<ul id="yatay-menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Web Tasarımı</a></li>
<li><a href="#">Grafik Animasyon</a></li>
<li><a href="#">Veritabanı</a></li>
<li><a href="#">Programlama</a></li>
</ul>

Adım 2: UL Etiketinin Biçimlendirilmesi

UL etiketi tarayıcı tarafından varsayılan olarak madde işareti, iç boşluk ve dış boşluk içermektedir.  Bunları istediğimiz tasarıma göre biçimlendiriyoruz.

ul#yatay-menu {
list-style: none;
margin:0;
padding:0;
}

Adım 3: LI etiketinin Biçimlendirilmesi

Önceki yazıda float:left özelliği ile yatay menü oluşturmuştum. Bu yazıda farklı bir yöntem olarak display:inline-block; yöntemi ile yatay menü oluşturacağız.

inline-block özelliği etiketin bulunduğu satırda ve alanda block olarak görünmesini sağlar. Liste etiketleri alt alta yazılırsa tarayıcılar tarafından beyaz karater boşluğu bırakılmaktadır.(yaklaşık 2px boşluk). Bu bilgi ile dış boşlukları -2px yaparak kaldıracağız.

ul#yatay-menu li {
display: inline-block;
padding:0 10px;
border-bottom:2px solid #3DA4AB;
margin:auto -2px;
}

Adım 4: Link Etiketinin Biçimlendirilmesi

ul#yatay-menu li a {
color: #F6CD61;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
height: 36px;
line-height: 36px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-color:#4A4E4D; 
}

Adım 5: Aktif Linkin Renginin Değiştirilmesi

ul#yatay-menu li a:hover{
color: #4A4E4D;
background-color:#F6CD61; 
}

 

Screenshot_40

TÜM KODLAR

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<style>
ul#yatay-menu {
list-style: none;
margin:0;
padding:0;
}
ul#yatay-menu li {
display: inline-block;
padding:0 10px;
border-bottom:2px solid #3DA4AB;
margin:auto -2px;
}
ul#yatay-menu li a {
color: #F6CD61;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
height: 36px;
line-height: 36px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-color:#4A4E4D; 
}
ul#yatay-menu li a:hover{
color: #4A4E4D;
background-color:#F6CD61; 
}

</style>
</head>

<body>
<ul id="yatay-menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Web Tasarımı</a></li>
<li><a href="#">Grafik Animasyon</a></li>
<li><a href="#">Veritabanı</a></li>
<li><a href="#">Programlama</a></li>
</ul>
</body>
</html>

 

İlginizi Çekebilir

Yorum Yap