CSS ile Menü Oluşturmak V – Resimli Menüler
"Arkaplan Resmi kaydırmaca" ile Resimli Menüler
Arkaplan Resmi kaydırmaca tanımlamasını cemsid‘den aldım. CSS ile menü yapımı serimize devam ediyoruz. CSS ile yapılan bir çok menü örneği mevcut biz burada bunları katagorize edip her bir katagoriye bir örnek yaparak mantığını anlatmaya çalıyoruz, mantığını anladıktan sonra CSS ile yapılan tüm menüleri yapabileceğimize inanıyorum.
CSS menülerinin vazgeçilmezi sırasız listeleri(<ul>) kullanarak her bir linkin iki resimi bulunan(bir normal hali, diğeri fare imlecinin üzerine gelince görünecek resim) menü oluşturacağız.
Bu menü sayfa yüklenmeden yüklendiği için javascript ile yapılan rollover menülerden avantajlıdır ve Internet Explorer’da Temporary Internet Files > Settings > ‘Every visit to page.’ seçeneği seçili olan kullanıcılar için biçilmiş kaftandır. Ayrıca CSS ile yapılan menülerdeki avantajlara(kolay ekleme ve düzenleme, esnek yapı vb.) sahiptir tabi ki.
Bu metod cemsid’inde açıkladığı gibi arkaplan resmi(background-image) kaydırarak yapılıyor. Genelde bu tip menüler resim içeren veya anti-aliased metinlerin kullanıldığı durumlarda kullanılır.
<ul id="menu" > <li id="elma"><a href="#" title="Elma">Elma</a></li> <li id="armut"><a href="#" title="Armut">Armut</a></li> <li id="muz"><a href="#" title="Muz">Muz</a></li> <li id="kivi"><a href="#" title="Kivi">Kivi</a></li> </ul>
Görüldüğü gibi diğer menü başlangıcından farkı olmayan-bir ek hariç- bir kodlama. Hariç olan ek her menu elemanına bir id atamamız. Çünkü her menü elemanı için bir resim tanımlaması yapacağız. Manav dükkanı açıyoruz :)
şimdi menümüzü oluşturan resimi hazırlamaya geldi sıra. Menü resmini oluştururken bir normal halini ve hemen altına fare imleci üzerine geldiğindeki halini koyup resmi kaydedeceğiz. Bu işlem için Photosohop, Firefowrk, PaintShopPro vb. programlar kullanabilrisiniz.
Menüdeki margin, padding ve imgeleri kaldıralım. Boyutlarını ve konumunu tanımlayalım:
ul#menu {
height: 54px;
width: 500px;
margin: 0;
padding: 0;
position: relative;
}
Menümüzü yatay olarak sıralamak için
ul#menu li {
list-style: none;
position: absolute;
}
Menü elemanlarının yükseklikleri sabit olduğu için hepsine ortak tanımlama yapıyoruz, hepsini kendine has kapsama alanı olması için blokladık(display:block) ve konumlandırdık(postion:relative).
ul#menu li a {
height: 54px;
display: block;
position:relative;
}
Her menü elemanı için kendi genişliği ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.
#elma a{
width:130px;
background: url(images/menu.jpg) 0 0 no-repeat;
}
#armut a{
width:142px;
background: url(images/menu.jpg) -130px 0 no-repeat;
}
#muz a{
width:120px;
background: url(images/menu.jpg) -272px 0 no-repeat;
}
#kivi a{
width:108px;
background: url(images/menu.jpg) -392px 0 no-repeat;
}
ve tüm menü elementlerinin soldan konumu belirleyelim.
#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}
Resimler üzerindeki metinleri kaldırmak için
ul#menu li a {
text-indent: -9999px;
text-decoration: none;
}
Menümüz tamam. şimdi de rollover efekti vermek için a:hover arkaplan resimlerinin konumunu belirleyelim. Konumunu yazarken sadece yükseliği üstten konumu değiştirdiğimize dikkat edin.
#elma a:hover{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a:hover{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a:hover{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a:hover{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}
Son olarakta bir bölümde olduğunda o bölümün aktif görünmesini sağlamak için, genel de bunu için a:hover durumu normal durum olarak tanımlanır. Bizde öyle yapalım. Mesela Muz bölümünde olduğumuzu farz edelim.
<ul id="menu" >
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz" class="secili" >Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>
#elma a.secili{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a.secili{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a.secili{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a.secili{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}
Örnek kodları indirmek için tıklayınız.
merhaba tekrar,
özr dilerim şu an tekrardan dikkatlice okudumda benim yaptıgım menumde secili kısmı içinde 3. bir katman oluşturdum resimde farklı renklerde. onu sormak istemiştim. yani secili bölümü oldugunda katmanın 2.katmandaki resmi gostermesini istemiyorum 3.sırya gecmesini istiyorum.
2.sorumda secili ögenin anlaşılması için degerleri her bir sayfa için ayrı ayrı girmemiz mi gerek? mesela sizin muz örneginizde de yapmış oldugunuz gibi class=”secili” degerini vermissiniz. bunu her sayfa için ayrı ayrı girmemizmi gerekir. nasıl ayarlıyacagız wordpress blglarının anlaması için.
teşekkür ederim şimdiden yanıtlarınız için.
merhaba fatih abi bu 2 katlı menunun 3 katmanlısını nasıl yapabiliriz? lütfen yardımcı bir kaynak gösterebilirmisin. Gerçekten günlerdir yaptıgım bir menünün aktif link (3.katman) bölümünü bir türlü çalıştıramıyorum. linke tıkladıgımda o sayfada oldugunun gösterilmesini istiyorum.
slm fatih abicim öncelikle paylaştığın bilgiler için çok teşekkür ediyorum. ben hem iş yerinde hemde kendi projelerimde css i sıksık kullanıyorum ve css çok kapsamlı olduğundan herşeyi bilemiyorum bu eksiklerimide seni takip ederek tamamlıyorum. burda sana bi sorum olacak linklerin hover durumlarında background pozisyonlarını nasıl ayarlıyorsun ağbi yani o eksi değerleri nasıl tespit ediyordun abi deneme yoluyla mı buluyorsun yoksa bunun için bi tekniğin var mı paylaşırsan sevinirim abi.
@enes , Şaştım kaldım resmen :) Fatih abi hem emek verip anlatmışsın hemde bir sürü yersiz tepki verilmiş :S Zaten bizde bu ben web tasarımın t’sini bilmeyeyim , ögrenmeyede çalışmayayım , araştırmayayım ama herşeyi bi kerede hemencecik yapıvereyim anlayışı oldugu sürece bu iş olmaz :)
Teşekkürler abi , eline sağlık gayet sade ve anlaşılır bir ders :)
Tek anlamadığım şu oldu,
Resimler üzerindeki metinleri kaldırmak için neden text-indent kullandıkta display:none; kullanmadık? Matt Cutts bir ara css ile gizlenen yazıların google tarafından cezalandırılabileceğini söylediğindenmi?
text-index kullanmamızın nedeni ekran okuyucu olarak tanımladığımız cep telefonu vb. araçlarda algılanmayan bu özellik sayesinde bu resimlerin görüntülenmediği yerlerde yazıların görünmesini sağlamak.
yazilarinizi cok begendim. yeterince anlasilabilir ve tam da istedigim seyler. bir yigin kitap aldim.. daha önce acemi oldugum icin.. ve suanda görüyorun ki bosuna masraf yapmisim. siteniz cok yararli. emeginiz icin tesekkürler.
Ben bi yerde yanlış yaptım sanırım :/
“bir bölümde olduğunda o bölümün aktif görünmesini sağlamak” kısmında neyi yannış yapmış olabilirim?
ul#menu {
height: 32px;
width: auto;
margin: 0;
padding: 0;
}
ul#menu li {
list-style: none;
float:left;
}
ul#menu li a {
height: 32px;
display: block;
position:static;
}
ul#menu li a {
text-decoration: none;
}
#anasayfa a{
width:93px;
background:url(img/menu/1.gif) no-repeat;
}
#hikayemiz a{
width:93px;
background:url(img/menu/2.gif) 0 no-repeat;
}
#bakis a{
width:93px;
background:url(img/menu/3.gif) 0 no-repeat;
}
#ani a{
width:93px;
background:url(img/menu/4.gif) 0 no-repeat;
}
#foto a{
width:93px;
background:url(img/menu/5.gif) 0 no-repeat;
}
#bize a{
width:93px;
background:url(img/menu/6.gif) 0 no-repeat;
}
#size a{
width:93px;
background:url(img/menu/7.gif) 0 no-repeat;
}
#anasayfa a:hover{
width:93px;
background: url(img/menu/m1.gif) 0 no-repeat;
}
#hikayemiz a:hover{
width:93px;
background: url(img/menu/m2.gif) 0 no-repeat;
}
#bakis a:hover{
width:93px;
background: url(img/menu/m3.gif) 0 no-repeat;
}
#ani a:hover{
width:93px;
background: url(img/menu/m4.gif) 0 no-repeat;
}
#foto a:hover{
width:93px;
background: url(img/menu/m5.gif) 0 no-repeat;
}
#size a:hover{
width:93px;
background: url(img/menu/m6.gif) 0 no-repeat;
}
#bize a:hover{
width:93px;
background: url(img/menu/m7.gif) 0 no-repeat;
}
/*aktif sayfayı belirlemek için zemin resmi konumu belirleme*/
#anasayfa a.secili{
width:93px;
background: url(img/menu/m1.gif) 0 no-repeat;
}
#hikayemiz a.secili{
width:93px;
background: url(img/menu/m2.gif) 0 no-repeat;
}
#bakis a.secili{
width:93px;
background: url(img/menu/m3.gif) 0 no-repeat;
}
#ani a.secili{
width:93px;
background: url(img/menu/m4.gif) 0 no-repeat;
}
#foto a.secili{
width:93px;
background: url(img/menu/m5.gif) 0 no-repeat;
}
#size a.secili{
width:93px;
background: url(img/menu/m6.gif) 0 no-repeat;
}
#size a.secili{
width:93px;
background: url(img/menu/m7.gif) 0 no-repeat;
}
<a href=”?q=ana”
<a href=”?q=hikayemiz”
<a href=”?q=anidefteri”
<a href=”?q=fotograflar”
<a href=”?q=bizeulasin”
<a href=”?q=sizeulasalim”
position değerlerini hepsinde 0 vermişsiniz. hover ve seçili durumlar için bunu menüye göre – değerli bişey olması lazım.
http://www.fatihhayrioglu.com/basit-resimli-menu-yapmak/
inceleyin
merhabalar dolasırken sitenize denk geldim, hakikatten cok hoş bilgiler war teşekkürler.
Üstadım eline yüreğine sağlık böyle paylaşımları görmenin sevinciyle tekrardan teşekür ederim.
Bu şekilde yeni öğrendim. bir diğer yöntem daha vardı sanki… Normal menü ve birde fare üzerine gelmesiyle görünen resim…
#menu ul li.sep {
width: 2px;
background: url(images/menu_sep.jpg) no-repeat left top;
}
#menu ul li a:hover, #menu ul li a.active {
background: transparent url(images/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}
#menu ul li a.active {
font-weight: bold;
cursor: default;
}
böyle bir kod gördüm.. bu konu hakkında bilgi verirmisiniz?
active kısmı bu menünün aktif olduğu durumlarda geçerlidir. Ama burada şöyle bir sorun oluyor. Eğer kullanıcı başka bir yere odaklanırsa bu tanımlar gidiyor. Bu nedenle ben dinaik olarak sınıf atamanın daha yararlı olacağı kanısındayım
[...] ö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 [...]