CSS ile Dikey Açilir Menü Yapimi

13.04.2017

Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayicisi tarafinda desteklenen(IE6 ve öncesi dahil) açilir menü yapilabilir. Aslinda javascript’e ihtiyaç olmamasina karsin IE7’den önceki sürümler için javascript kodu gerekmektedir.

Açilir menü yapmak için daha önceki menü örneklerinde oldugu gibi siralanmamis listeleri(<ul>) kullanacagiz. Buradaki fark alt kategorilerin yani üzerine gelince açilacak menünün bir alt sirlanmis liste olarak eklenmesidir.

:::html
<ul id="menu" >
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a>
    <ul>
        <li><a href="#">s?irket Haberleri </a></li>
        <li><a href="#">Yurt içi Haberleri </a></li>
        <li><a href="#">Yurt disi Haberleri</a></li>
    </ul>
    </li>
    <li><a href="#">Ürünler</a>
    <ul>
        <li><a href="#">Tencere</a></li>
        <li><a href="#">Tava</a></li>
        <li><a href="#">Ütü</a></li>
        <li><a href="#">Tost Makinesi </a></li>
        <li><a href="#">El Süpürgesi </a></li>
    </ul>
    </li>
</ul>

Ilk olarak satir basi bosluklarini ve imgeleri kaldiralim.

:::css
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
}

Sonra ilk linkleri göreceli olarak konumlandirmaliyiz. Bu konumlandirma aslinda ikinci kademe açilacak menüye mutlak konumlandirma yapilmasi için kullanilir.

:::css
ul li {
	position: relative;
}

Bir sonraki adimda da ikincil açilan menüleri konumlandirmak olacaktir. Her birinci linke karsilik gelen ikincil açilir menüler ilkinin sagina konumlandirilmalidir. Bunun için soldan 149px degeri verilir. 1 piksel sola kaydirilir ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasin. Ayrica ikincil linklerin ilk sayfa açildiginda görünmemesi için display:none özelligi atanir.

:::css
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

Açilir menü yapisini olusturmus olduk simdi linkleri güzellestirip menü haline getirmek için önceki menüleri yaparken uyguladigimiz kodlari uygulayalim. Linklerin kendine has alanlarini tanimlamak içindisplay:block özeligini kullanalim. Linklerin altindaki çizgiyi kaldirmak için text-decoration:noneözelligini kullanalim. Linkler  arasina mesafe vermek için padding verelim. Birde bir zemin rengi tanimi ver kenarlik tanimi yapalim. Üstteki linkin alt kenarligi ile alttaki linkin üst kenarligi üst üste bineceginde alt kenarlik degerini sifirlayalim.

:::css
ul li a {
    display: block;
    text-decoration: none;
    background-color: #E2E2E2;
    padding: 5px;
    border:1px solid #000;
    border-bottom:0;
}

Bu kodu yazdigimizda IE linkler arasina bosluk koyacaktir(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

:::css
/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */

En alttaki çizgimiz eksik kalmamasi için ilk link ul’sinin alt kenarlik tanim yapariz.

:::css
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #00;
}

Birincil menü görünümü tamamlandi ancak ikincil menüler görünmüyor. Ikincil menüleri göstermek için:

:::css
li:hover ul {
	display: block;
}

Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7’den öncesi bu kodu desteklemez.

Internet Explorer 7. versiyonuna kadar :hover pseudo sinifini sadece linklerde (<a>) uygulanmasini destekler diger elementlerde bu özelligin kullanimini desteklemez.

Peki menümüz böyle mi kalacak hayir. IE6 ve alti için bir javascript kodu yazacagiz.

:::javascript
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Bu çözümü bize kazandiran arkadaslara tesekkürü bir borç biliriz ve linkini de yazariz.

Ayrica asagidaki kodu da eklemeliyiz.

:::css
li:hover ul, li.over ul{ display: block; }

Ayrica kod daki<ul id=”menu” > ve javascriptteki navRoot = document.getElementById(“menu”); ayni olmasina dikkat edelim.

Örnek kodlari indir

Bazi arkadaslardan bu menünün sagda olmasi halin nasil yapariz diye bir istek geldi bende bunun için bir kod eklemek istiyorum. Bu ekleme 28 Mayis 2009 da yapilmistir.

Soldaki örnege göre iki degisikligimiz oldu. Birincisi menüyü saga almak için ul ye float:right atamasi yaptik. Ikincisi, ikinici açilan menüyü soldan 149 px yerine eksi 149px ile sola almak oldu

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