Forum'da ara:
Ara


Yazar Mesaj
Mesaj21.08.2008, 18:46 (UTC)    
Mesaj konusu: Css ile resimli menü oluşturmak
Alıntıyla Cevap Gönder
Alıntıdır.
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.

Kod:
<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 Smile

şž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:

Kod:
ul#menu {
height: 54px;
width: 500px;
margin: 0;
padding: 0;
position: relative;
}


Menümüzü yatay olarak sıralamak için

Kod:
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).
Kod:
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.
Kod:
#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.
Kod:
#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}


Resimler üzerindeki metinleri kaldırmak için
Kod:
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.
Kod:
#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.


Kod:
<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>

Kod:
#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 kod

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Resimli Menüler</title>
<style>
ul#menu {   
   height: 54px;
   width: 500px;
   margin: 0;
   padding: 0;
}

ul#menu li {
   list-style: none;
   position: absolute;
}

ul#menu li a {
   height: 54px;
   display: block;
   position:relative;
   }   

ul#menu li a {
   text-indent: -9999px;
   text-decoration: none;
   }   

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

#elma      {left: 0px;}
#armut      {left: 130px;}
#muz      {left: 272px;}
#kivi      {left: 392px;}

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

/*aktif sayfayı belirlemek için zemin resmi konumu belirleme*/

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

</style>
</head>

<body>
<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>
</body>
</html>

______________
<_-ANTİ POP-_>
↑
Mesaj21.08.2008, 18:51 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
güzel bir paylaşım olmuş.
______________
Fenerbahçe Taraftarı İçin Şık tasarımlı bir site yaptık.
Umarım beğenirsiniz.
www.bin907.tr.gg


↑
Mesaj21.08.2008, 18:52 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
royalportal yazmış:
güzel bir paylaşım olmuş.

Wink
______________
<_-ANTİ POP-_>
↑
Mesaj21.08.2008, 18:57 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
teşekkürler sanalpower. ellerne sağlık...
______________
Arrow www.csshost.tr.gg
Arrow Sitemiz yenilenmiş ve hizmete sunulmuştur Arrow www.onlinelist.tr.gg
↑
Mesaj21.08.2008, 19:05 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
onlinelist yazmış:
teşekkürler sanalpower. ellerne sağlık...

Wink
______________
<_-ANTİ POP-_>
↑
Mesaj01.10.2008, 08:26 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
tşkler çok güzel paylaşım resimli menü ile css menüyü bi araya getirmek gibi bişey arkadaşlar Wink
______________
↑
Önceki mesajları göster:   
  • 1. sayfa (Toplam 1 sayfa)

  •  
    • Geçiş Yap:  


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu

© 2024 webme GmbH, Almanya, Tüm hakları saklıdır.