Basit Resimli Menü Yapmak
Daha önce resimli menü yapımını anlatmıştım. http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-v-resimli-menuler/ ancak burada şöyle bir sorun ile karşılaştık; Bu makalede anlattığımız yöntem ile genel bir metot anlatarak tüm resimli menüler için şablon niteliğinde bir kod ürettik, yani tüm menüler bu kod ile üretilebilir(yatay, dikey, iki satır vb.) tabi bu kodumuzu biraz daha fazlalaştırdı ve karıştırdı. Ancak bir çok sefer biz sadece yatay ve tek sıralı bir resimli menü yapıyoruz bu kadar koda ihtiyacımız yok. İlgili makalenin yorumlarında da gördüğümüz gibi bir çok insan konuyu anlamakta güçlük çekiyor bende bu nedenle sadece yatay menülere örnek kısa bir kod ve örnek yaparak konuya açıklık getirmek istedim.
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
gerçekten harika bir paylaşım fatih abi seni sürekli takip ediyorum iş yerinde ve kendi projelerimi css altyapısı ile hazırlıyorum ve css ile iç içeyim eksiklerim daha çok ve bu eksikleimide senin sayende tamamlıyorum uzun zamandır bu menüyü nasıl yapabilirim çabası içerisindeydim ve bana çok iyi bir kaynak oldu ellerin dert görmesin allah kılavyene zeval vermesin abi :D
çoktandır merak ettiğim ama gözümde büyüttüğüm bir konuydu. öğrenmeme vesile oldunuz. yalın anlatımınız için teşekkür ederim.
Buradaki xhtml’e kodunun
Ana Sayfa
Ürünler
Hizmetler
Bize Ulaşın
boyle degistirmem sonucunda calıstı heralde bir yanlışlık oldu
ilginç. ilk kodda bir sorun görünmüyor
Teşekkürler
bu aralar css ye biraz merak sardım :)
bu güzel olacak
Çok güzel anlatmışsın abi ben css hakkında bilgim biraz kıstlı bi türkü yapamadım ben menude 8 öğe olması için 960×120 bi resim düzenledim ama hover olayı olmadı kodlarıda ayarladım ona göre bak css kodları
ul.menu{
margin:0;
padding:0;
list-style:none;
width:960px;
height:40px;
}
ul.menu li{
float:left;
}
ul.menu li a{
display:block;
width:120px;
height:40px;
text-indent:-9999px;
outline:none;
text-decoration:none;
background:url(images/basit_resimli_menu.png) 0 0 no-repeat;
}
li#m1 a{background-position:0 0;}
li#m2 a{background-position:-120px 0;}
li#m3 a{background-position:-240px 0;}
li#m4 a{background-position:-360px 0;}
li#m5 a{background-position:-480px 0;}
li#m6 a{background-position:-600px 0;}
li#m7 a{background-position:-720px 0;}
li#m8 a{background-position:-840px 0;}
li#m1 a:hover{background-position:0 -40px;}
li#m2 a:hover{background-position:-120px -40px;}
li#m3 a:hover{background-position:-240px -40px;}
li#m4 a:hover{background-position:-360px -40px;}
li#m5 a:hover{background-position:-480px -40px;}
li#m6 a:hover{background-position:-600px -40px;}
li#m7 a:hover{background-position:-720px -40px;}
li#m8 a:hover{background-position:-840px -40px;}
bu kodda sorun yok gibi ama örneği görebiliceğim bir link varmı yada örneği ban gönderebilrimisin
arkadasım 360 dan sonra tekrar sıfıra don de bir bak oluyomu diye
Çok teşekkürler daha önceki yazınızdan çok faydalanmıştım. :)
Basit deyip geçmemek lazım aslında. Öyle bir zamanda işe yarıyor ki anlatamam :D çok zor bir tasarımda kullanmıştım bu tarz bir menü.
Abi neden hepsi için ayrı bir tanımlama yaptın? Sadece yükseklik değerleri ile yapılamaz mı? hover da -xxx değer ata gibi.
Elinize sağlık. çok faydalı bir yazı olmuş. Önemli bir şey aslında. Çünkü tek resim kullanarak bir menü yapmak dosya boyutu bakımından hemde site hızı bakımından tasarruf sağlıyor.
Güzel bir anlatım olmuş, tamda burdaki yazıyı okuyordum peşinden yazınızı gördüm.Fatih beyin yazısından sonra okumanızı tavsiye edebileceğim bir yazı.
Eline sağlık Fatih abi, güzel bir anlatım ve örnek olmuş. Ben de sitemde açılır bir xhtml/css menü anlatmayı düşünüyordum bu sıralar. Sizin yazınız tam üzerine geldi :)