Güncelleme: Bu makale bazı sorunlar nedeni ile 19/12/2006 tarihinde yeniden düzenlenmiştir.

Bir önceki makalede dikey açılır menüleri gördük. Bu makalede yatay açılır menülere bir örnek vereceğiz. Html kodumuz aynı olsun

:::html
<ul id="menu" >
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a>
    <ul>
        <li><a href="#">şžirket Haberleri </a></li>
        <li><a href="#">Yurt içi Haberleri </a></li>
        <li><a href="#">Yurt dışı 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>

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım. Dikey menüde olduğu gibi.

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

Daha sonra menümüzü yatay hale getirmek için floatözelliğini kullanalım. Normalde bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II - Yatay Menüler) Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.

Göreceli olarak konumlandırılmış(postion:relative) bir elementin içindeki Mutlak Konumlandırılmış(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sağ,sol ve alttından hizalandıralabilir. Bu kullanım bize bir çok uygulmada yardımcı olacaktır ve bu kullanım ile çok güzel sonuçlar elde edeceğiz.

CSS ile konumlandırma(positioning)

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

Sonra ikincil linkleri sayfaya ilk açıldığında görünmez(display:none) yapalım. Birincil linklere göre konumlandırmak için postion:absolute özelliği ve top:19px (satır yüksekliği 15px + 2px alttan(sonra ekleyeceğiz) + 2px üstten(sonra ekleyeceğiz)) özelliğini kullanalım.

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

Yalnız burada IE sorun çıkaracaktır. IE ve Opera ikincil menüleri konumlandırmasında sorun çıkarır, bunu engellemek için:

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

Görünümü biraz güzelleştirelim:

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

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

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

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

Önceki makalede belirttiğimiz gibi bu kod IE’de çalışmayacaktır. IE’de çalışması için aşağıdaki kodları yazmalıyız.

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

Ayrıca aşağıdaki kodu da eklemeliyiz.

:::css
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”); aynı olmasına dikkat edelim.

işte sonuç:

şimdiye kadar anlatılan menü kodlarında işin yapısı öğretilmeye çalışılmıştır. Bu kodları kullanarak çok çeşitli menüler yapılabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu şekilde tasarlanabilir. alt kademeli, değişik renklerde ve değişik ebatlarda menü yapılabilir.

Örnek kodları indir

Kaynaklar

HTML5 download özniteliği

HTML'de bir dokümanı kullanıcıya indirtmek için bir bağlantı verdiğimizde parantez içinde "sağ tılayın ve çıkan menüden farklı kaydet'e b...… Devamını oku

Angularjs'de doğrulanmayan input değerine erişmek

24 November 2014 tarihinde yayınlandı.

Mac OS'da Yavaş İnternet Durumunu Simüle Etmek

12 November 2014 tarihinde yayınlandı.