CSS ile Resimli Baska Bir Menü Yapimi

13.04.2017

Bu makalede anlattigimiz yöntem ile genel bir metot anlatarak tüm resimli menüler için sablon niteliginde bir kod ürettik, yani tüm menüler bu kod ile üretilebilir(yatay, dikey, iki satir vb.) tabi bu kodumuzu biraz daha fazlalastirdi ve karistirdi. Ancak bir çok sefer biz sadece yatay ve tek sirali bir resimli menü yapiyoruz bu kadar koda ihtiyacimiz yok. Ilgili makalenin yorumlarinda da gördügümüz gibi bir çok insan konuyu anlamakta güçlük çekiyor bende bu nedenle sadece yatay menülere örnek kisa bir kod ve örnek yaparak konuya açiklik getirmek istedim.

Daha önceki makalemdede belirttigim gibi bu menü ardalan kaydirma yöntemi ile yapilmis bir menüdür. CSS’in bize kazandirdigi en büyük avantajlardan biridir ardalan konumunu istedigimiz gibi ayarlamak.

Bu metot ile tek resim kullandigimiz için optimizasyon içinde bize büyük avantaj saglar. 5 elemanli bir resimli menüde her bir eleman için tek tek resim olusturdugumuzda sayfa nette açilirken her bir resim için istek yapilacaktir, buda sayfanin yavas açilmasina neden olacaktir. Bu metotta ise tek resim yüklenecek ve bu bize performans kazandiracaktir.

Çok basit bir xhtml kodu var. Birçok menü örneginde oldugu 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 Ulasin</a></li>
</ul>

Menümüzün resimlerini tek bir resim dosyasi olarak hazirlayacagiz. Biz burada normal ve fare imleci üzerine geldigindeki halini(:hover) koyduk ama bunlara seçili ve tiklama durumlarinida eklenebilir.

Simdi CSS kodlarimizi yazalim.

ul için genel sifirlama kodlarimizi yazalim

ul.menu{
    margin:0;
    padding:0;
    list-style:none;
    width:480px;
    height:40px;
}

Sirasiz listelerin her nesnesini(li) yan yana dizmek için float:left tanimini yapmaliyiz.

ul.menu li{
    float:left;
}

Linkler için genel tanimlarimizi yapalim

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 yukaridaki resimdeki konumunu belirlemeye geldi sira.

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 sekilde resimli bir menü olusturduk. Tabi buna birde fare üzerine geldigindeki 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;}

Örnegi görmek için tiklayiniz

Not: Ardalan konumu belirleme

Sistem yukaridaki mantik ile yürür. Genisligi ve yüksekligi belli olan alanin genel resimdeki konumunu belirterek menümüzü olusturduk. Yukaridaki örnek resimde “Ürünler”in fare üzerine geldigindeki(:hover) görüntüsünü elde etmek için resimdeki konumu yukaridan -40px, soldan -120px olarak atamaliyiz. Ardalan konumu belirlerken resmin sifir noktasi sol üst kösesidir, bu nedenle degerler eksi(-) deger alir.

 

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