Merhaba arkadaşlar,

Bugün yatay menü yapımını anlatacağım, çalışma sonucu aşağıdaki gibi olacak.

Öncelikle div yapısını ve listelemeyi paylaşıyorum.

<div id="menualani">
<ul>
<li><a href="#"> Anasayfa</a></li>
<li><a href="#">Videolar</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Yazarlar</a></li>
<li><a href="#">İçerik Talep Et</a></li>
<li><a href="#">Destek</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

gerekli css.

<style type="text/css">

    /*menümüzün genişlik ve yüksekliğini belirliyoruz.*/
#menualani {           
	background-color: #09C;
	height: 35px;
	width: 840px;
}
#menualani ul {
	margin: 0px;
	padding: 0px;
}
    /*herbir menü alanımız için genişlik belirliyoruz.*/
    /*yanyana sıralanması için float: left diyoruz.*/
#menualani ul li {
	float: left;
	width: 120px;
	list-style-type: none;
}

    /*textimiz için font renk vs seçiyoruz.
       display block demezseniz sadece yazının üzerine gelince seçim yapmış olursunuz
       block diyerek yazıyı li ile belirlediğimiz alana sabitliyoruz.*/
#menualani ul li a {
	line-height: 35px;
	font-family: Tahoma;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #06C;
	font-size: 14px;
}

  /* mouse menü alanımızın üstüne gelince renginin değişmesi için.*/
#menualani ul li a:hover {
    background-color: #F63;
}
</style>

Mehmet Fe

4686 görüntüleme

CSS

Yorumlar

Adınız Soyadınız

Mail Adresiniz

Doğrulama Kodu