CSS Menü Tasarımı

XHTML kodlarıyla hemen başlayalım;

<ul class="menu">
     <li id="mAnasayfa"><a href="#">Ana Sayfa</a></li>
     <li id="mUrunler"><a href="#">Ürünler</a></li>
     <li id="mHizmetler"><a href="#">Hizmetler</a></li>
     <li id="mBizeUlasin"><a href="#">Bize Ulaşın</a></li>
</ul>

Menümüzün resimlerini tek bir resim dosyası olarak hazırlayacağız. Biz burada normal ve fare imleci üzerine geldiğindeki halini(:hover) koyduk ama bunlara seçili ve tıklama durumlarınıda eklenebilir.

Şimdi CSS kodlarımızı yazalım.

ul için genel sıfırlama kodlarımızı yazalım

ul.menu{
   margin:0;
   padding:0;
   list-style:none;
   width:480px;
   height:40px;
}

Sırasız listelerin her nesnesini(li) yan yana dizmek için float:left tanımını yapmalıyız.

ul.menu li{
   float:left;
}

Linkler için genel tanımlarımızı yapalım

ul li a{
   display:block;
   width:120px;
   height:40px;
   text-indent:-9999px;
   outline:none;
   text-decoration:none;
   background:url(images/basit_resimli_menu.jpg) 0 0 no-repeat;
}

Her bir menü nesnesinin yukarıdaki resimdeki konumunu belirlemeye geldi sıra.

li#mAnasayfa a{background-position:0 0;}
li#mUrunler a{background-position:-120px 0;}
li#mHizmetler a{background-position:-240px 0;}
li#mBizeUlasin a{background-position:-360px 0;}

Basit bir şekilde resimli bir menü oluşturduk. Tabi buna birde fare üzerine geldiğindeki durumu ekleyerek daha belirgin bir hale getirebiliriz.

li#mAnasayfa a:hover{background-position:0 -40px;}
li#mUrunler a:hover{background-position:-120px -40px;}
li#mHizmetler a:hover{background-position:-240px -40px;}
li#mBizeUlasin a:hover{background-position:-360px -40px;}

Örnek için buraya bakabilirsiniz

CSS Menü Tasarımı