CSS ile Yatay Açilir Menü Olusturmak

13.04.2017

Bu makalede yatay açilir menülere bir örnek verecegiz. Html kodumuz ayni olsun

<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. Dikey menüde oldugu gibi.

ul#menu, ul#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Daha sonra menümüzü yatay hale getirmek için floatözelligini kullanalim. Normalde bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II - Yatay Menüler) Sonra ilk linkleri göreceli olarak konumlandirmaliyiz. Bu konumlandirma aslinda ikinci kademe açilacak menüye mutlak konumlandirma yapilmasi için kullanilir.

Göreceli olarak konumlandirilmis(postion:relative) bir elementin içindeki Mutlak Konumlandirilmis(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sag,sol ve alttindan hizalandiralabilir. Bu kullanim bize bir çok uygulmada yardimci olacaktir ve bu kullanim ile çok güzel sonuçlar elde edecegiz.

CSS ile konumlandirma(positioning)

ul#menu li {
    float: left;
    position: relative;
    width: 150px;
}

Sonra ikincil linkleri sayfaya ilk açildiginda görünmez(display:none) yapalim. Birincil linklere göre konumlandirmak için postion:absolute özelligi ve top:19px (satir yüksekligi 15px + 2px alttan(sonra ekleyecegiz) + 2px üstten(sonra ekleyecegiz)) özelligini kullanalim.

ul#menu li ul {
    display: none;
    position: absolute;
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
    left: 0;
}

Yalniz burada IE sorun çikaracaktir. IE ve Opera ikincil menüleri konumlandirmasinda sorun çikarir, bunu engellemek için:

ul#menu li > ul {
    top: auto;
    left: auto;
}

Görünümü biraz güzellestirelim:

ul#menu li a {
    font: bold 11px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    color: #000;
    background: #efefef;
    text-decoration: none;
}

ve rollover hali için:

ul#menu li a:hover {
    color: #a00;
    background: #fff;
}

Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:

ul#menu li:hover ul {
  display: block;
}

Ayrica asagidaki kodu da eklemeliyiz.

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

Önemli bir not olarak koddaki <ul id=”menu” > ve javascriptteki navRoot = document.getElementById(“menu”); ayni olmasina dikkat edelim.

iste sonuç:

simdiye kadar anlatilan menü kodlarinda isin yapisi ögretilmeye çalisilmistir. Bu kodlari kullanarak çok çesitli menüler yapilabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu sekilde tasarlanabilir. alt kademeli, degisik renklerde ve degisik ebatlarda menü yapilabilir.

Örnek kodlari indir

 

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