CSS ile Resimli Menü Yapimi

13.04.2017

“Arkaplan Resmi kaydirmaca” ile Resimli Menuler

 CSS ile menü yapimi serimize devam ediyoruz. CSS ile yapilan bir çok menü örnegi mevcut biz burada bunlari katagorize edip her bir katagoriye bir örnek yaparak mantigini anlatmaya çaliyoruz, mantigini anladiktan sonra CSS ile yapilan tüm menüleri yapabilecegimize inaniyorum.

CSS menülerinin vazgeçilmezi sirasiz listeleri(<ul>) kullanarak her bir linkin iki resimi bulunan(bir normal hali, digeri fare imlecinin üzerine gelince görünecek resim) menü olusturacagiz.

Bu menü sayfa yüklenmeden yüklendigi için javascript ile yapilan rollover menülerden avantajlidir ve Internet Explorer’da Temporary Internet Files > Settings > Every visit to page. seçenegi seçili olan kullanicilar için biçilmis kaftandir. Ayrica CSS ile yapilan menülerdeki avantajlara(kolay ekleme ve düzenleme, esnek yapi vb.) sahiptir tabi ki.

Bu metod cemsid’inde açikladigi gibi arkaplan resmi(background-image) kaydirarak yapiliyor. Genelde bu tip menüler resim içeren veya anti-aliased metinlerin kullanildigi durumlarda kullanilir.

:::html
<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ügü gibi diger menü baslangicindan farki olmayan-bir ek hariç- bir kodlama. Hariç olan ek her menu elemanina bir id atamamiz. Çünkü her menü elemani için bir resim tanimlamasi yapacagiz. Manav dükkani açiyoruz :)

simdi menümüzü olusturan resimi hazirlamaya geldi sira. Menü resmini olustururken bir normal halini ve hemen altina fare imleci üzerine geldigindeki halini koyup resmi kaydedecegiz. Bu islem için Photosohop, Firefowrk, PaintShopPro vb. programlar kullanabilrisiniz.

Menüdeki margin, padding ve imgeleri kaldiralim. Boyutlarini ve konumunu tanimlayalim:

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

Menümüzü yatay olarak siralamak için

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

Menü elemanlarinin yükseklikleri sabit oldugu için hepsine ortak tanimlama yapiyoruz, hepsini kendine has kapsama alani olmasi için blokladik(display:block) ve konumlandirdik(postion:relative).

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

Her menü elemani için kendi genisligi ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.

:::css
#elma a{
	background: url(images/menu.jpg) 0 0 no-repeat;
	width: 130px;
}

#armut a{
	background: url(images/menu.jpg) -130px 0 no-repeat;
	width: 142px;
}

#muz a{
	background: url(images/menu.jpg) -272px 0 no-repeat;
	width: 120px;
}

#kivi a{
	background: url(images/menu.jpg) -392px 0 no-repeat;
	width: 108px;
}

ve tüm menü elementlerinin soldan konumu belirleyelim.

:::css
#elma{
left: 0px;
}

#armut{
	left: 130px;
}

#muz{
	left: 272px;
}

#kivi{
	left: 392px;
}

Resimler üzerindeki metinleri kaldirmak için

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

Menümüz tamam. simdi de rollover efekti vermek için a:hover arkaplan resimlerinin konumunu belirleyelim. Konumunu yazarken sadece yükseligi üstten konumu degistirdigimize dikkat edin.

:::css
#elma a:hover{
	background: url(images/menu.jpg) 0 -54px no-repeat;
	width: 130px;
}

#armut a:hover{
	background: url(images/menu.jpg) -130px -54px no-repeat;
	width: 142px;
}

#muz a:hover{
	background: url(images/menu.jpg) -272px -54px no-repeat;
	width: 120px;
}

#kivi a:hover{
	background: url(images/menu.jpg) -392px -54px no-repeat;
	width: 108px;
}

Son olarakta bir bölümde oldugunda o bölümün aktif görünmesini saglamak için, genel de bunu için a:hover durumu normal durum olarak tanimlanir. Bizde öyle yapalim. Mesela Muz bölümünde oldugumuzu farz edelim.

:::html
<ul id="menu">
	<li id="elma"><a title="Elma" href="#">Elma</a></li>
	<li id="armut"><a title="Armut" href="#">Armut</a></li>
	<li id="muz"><a class="secili" title="Muz" href="#">Muz</a></li>
	<li id="kivi"><a title="Kivi" href="#">Kivi</a></li>
</ul>

:::css
#elma a.secili{
	background: url(images/menu.jpg) 0 -54px no-repeat;
	width: 130px;
}

#armut a.secili{
	background: url(images/menu.jpg) -130px -54px no-repeat;
	width: 142px;
}

#muz a.secili{
	background: url(images/menu.jpg) -272px -54px no-repeat;
	width: 120px;
}

#kivi a.secili{
	background: url(images/menu.jpg) -392px -54px no-repeat;
	width: 108px;
}

Örnek kodlari indirmek için tiklayiniz.

kaynak: http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN