Daha önceki makalemdede belirttiğim gibi bu menü ardalan kaydırma yöntemi ile yapılmış bir menüdür. CSS’in bize kazandırdığı en büyük avantajlardan biridir ardalan konumunu istediğimiz gibi ayarlamak.

Bu metot ile tek resim kullandığımız için optimizasyon içinde bize büyük avantaj sağlar. 5 elemanlı bir resimli menüde her bir eleman için tek tek resim oluşturduğumuzda sayfa nette açılırken her bir resim için istek yapılacaktır, buda sayfanın yavaş açılmasına neden olacaktır. Bu metotta ise tek resim yüklenecek ve bu bize performans kazandıracaktır.

Çok basit bir xhtml kodu var. Birçok menü örneğinde olduğu gibi ul kodu;

<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;}

Örneği görmek için tıklayınız

Not: Ardalan konumu belirleme

Sistem yukarıdaki mantık ile yürür. Genişliği ve yüksekliği belli olan alanın genel resimdeki konumunu belirterek menümüzü oluşturduk. Yukarıdaki örnek resimde “Ürünler”in fare üzerine geldiğindeki(:hover) görüntüsünü elde etmek için resimdeki konumu yukarıdan -40px, soldan -120px olarak atamalıyız. Ardalan konumu belirlerken resmin sıfır noktası sol üst köşesidir, bu nedenle değerler eksi(-) değer alır.

Kaynaklar

• http://www.webdesignerwall.com/tutorials/advanced-css-menu/
• http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
• http://www.3point7designs.com/blog/2006/07/24/accessible-css-roll-over-images/
• http://simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html
• http://inobscuro.com/tutorials/read/19/
• http://dragan.yourtree.org/blog/en/2007/04/10/pure-css-rollover-menu/
• http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
• http://www.codeitred.com/2008/08/12/apple-style-menu-tutorial-css-sprites