Merhaba arkadaşlar. Biliyorsunuz css artık tasarımlarda vazgeçilmez bir hal aldı. Bütün siteler tasarımlarını css ile yeniliyorlar. Biz de bu yazıda nasıl basitçe yatay bir menü yapacağımıza bakalım.

İlk önce xhtml kodumuzu yazalım. Menü için klasik liste yapısını kullanacağız.

<ul class="menulistesi">
	<li><a href="anasayfa.html">Anasayfa</a></li>
	<li><a href="digerlink.html">DiÄŸer link</a></li>
	<li><a href="baskalink.html">BaÅŸka link</a></li>
</ul>

Åžimdi de css kodlarına geçelim. Önce “<ul>” tagına verdiÄŸimiz “menulistesi” sınıfının özelliklerini belirleyelim.

.menulistesi {
margin: 0px;
list-style-type: none;
}

Burada ilk satırda, çevresinde oluşacak boşluğu iptal ettik. 2. satırda ise liste başı simgesi göstermemesini söyledik.

Åžimdi de “<li>” ögesinin özelliklerini belirleyelim.

.menulistesi li {
float: left;
margin-right: 8px;
}

Burada ilk satırda ögelerin yan yana durmasını istediğimizi belirttik. 2. satırda ise her ögenin arasında 8px boşluk olması gerektiğini söyledik.

Şimdi de linklerimizin özelliklerini belirleyelim.

.menulistesi a {
color: #333333;
font-weight: bold;
text-decoration: none;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #0099CC;
}
.menulistesi a:hover {
border-bottom-color: #333333;
}

Ä°lk bölümde linki “display:block” ile “<div>” e benzeyen bir yapıya soktuk. Daha sonra altına border ekledik. “hover” ile ise mouse üzerine gidince deÄŸiÅŸecek olan özelliÄŸini belirttik.

Css ile en basit yatay menü örneği budur. Kendiniz bu yapıdan yola çıkarak daha gelişmiş menüler yapabilirsiniz.

Yaptığımız menünün örneği için tıklayın.