Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayıcısı tarafında desteklenen(IE6 ve öncesi dahil) açılır menü yapılabilir. Aslında javascript’e ihtiyaç olmamasına karşın IE7′den önceki sürümler için javascript kodu gerekmektedir.

Açılır menü yapmak için daha önceki menü örneklerinde olduğu gibi sıralanmamış listeleri(<ul>) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.

<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.

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px;

}

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.

ul li {

position: relative;

}

Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır. Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına konumlandırılmalıdır. Bunun için soldan 149px değeri verilir. 1 piksel sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında görünmemesi için display:none özelliği atanır.

li ul {

position: absolute;

left: 149px;

top: 0;

display: none;

}

Açılır menü yapısını oluşturmuş olduk şimdi linkleri güzelleştirip menü haline getirmek için önceki menüleri yaparken uyguladığımız kodları uygulayalım. Linklerin kendine has alanlarını tanımlamak için display:block özeliğini kullanalım. Linklerin altındaki çizgiyi kaldırmak için text-decoration:none özelliğini kullanalım. Linkler arasına mesafe vermek için padding verelim. Birde bir zemin rengi tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini sıfırlayalım.

ul li a {

display: block;

text-decoration: none;

background-color: #E2E2E2;

padding: 5px;

border:1px solid #000;

border-bottom:0;

}

Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

/* IE. gizle \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* IE den gizleme sonu */

En alttaki çizgimiz eksik kalmaması için ilk link ul’sinin alt kenarlık tanım yaparız.

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px;

border-bottom: 1px solid #00;

}

Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor. İkincil menüleri göstermek için:

1. 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.

Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript kodu yazacağız.

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 kazandıran arkadaşlara teşekkürü bir borç biliriz ve linkini de yazarız.

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

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

Ayrıca kod daki<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); aynı olmasına dikkat edelim.

Örnek kodları indir

Kaynaklar

• http://www.alistapart.com/articles/horizdropdowns
• http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
• http://www.seoconsultants.com/css/menus/tutorial/
• http://www.cssplay.co.uk/menus/flyout2.html

Sarkan menüleri, baş aşağı çevrilmiş sekmeli menülere (tab menu) benzetebiliriz. Bu menüler genellikle bir web sayfasının en üst bölümünde yer alırlar. Fareyi herhangi bir menü öğesinin üzerine getirdiğinizde, menünün renk değiştirdiğini ve diğerlerinden biraz daha aşağıya doğru kaydığını görürsünüz (yandaki resme bakınız). İşte bu yazımda da css ile sarkan menü yapımını anlatacağım

HTML ile menü yapısının oluşturulması

Öncelikle sarkan menümüzü oluşturan menü öğelerini HTML ile belirtmemiz gerekiyor. Bunun için bir DIV etiketi içerisinde bir sırasız liste oluşturmamız lâzım. Önemli olan nokta DIV etiketinin ID özniteliğine "sarkan_menu" ismini vermiş olmak. Ayrıca herbir menü öğesinin tıklanabilir olması için A etiketi ile linke çevrilmiş olması gerekmektedir.

Bu kodların ekran görüntüsü alttaki gibi olacaktır:

CSS ile biçimlendirme işleminin yapılması

Sarkan menümüzü oluşturduktan sonra şimdi de CSS ile bu menüyü biçimlendirip son şeklini vermemiz gerekiyor. Bunun için önce menü öğelerini alt alta değil de yan yana sıralamamız gerekecek. Bundan sonraysa menü öğelerinin genişlik ve renk değerlerini atayacağız. Son olarak da fare, bir menü öğesi üzerindeyken o menü öğesinin aşağıya doğru sarkmasını sağlayacağız. Tüm bu işlemleri 4 bölüm halinde ele alacağız.

mouse-over.png

Biçimlendirme yaparken Abode Fireworks yazılımı ile hazırladığım üstteki görseli de kullanacağız. Adı üstünde "mouse-over.png" dosyası, fare ile bir menü öğesinin üstüne geldiğimizde işimize yarayacak. Bu görselin genişlik (width) değeri 85 pikseldir.

1. bölüm :

Bu ilk bölümde UL etiketi ile oluşturduğumuz sırasız listeyi biçimlendiriyoruz. Margin ve Padding ile uzaklık değerlerini sıfırladık. Sonra Height ve Overflow ile taşma problemi oluşmasını önledik. List-style ile de menü öğelerinde madde imleri (bullet) görünmesini engelledik.

2. bölüm :

İkinci bölümde LI etiketi ile oluşturduğumuz liste öğelerini biçimlendirdik. Float ile liste öğelerinin sola hizalanıp yan yana dizilmesini sağladık. Margin-right ile liste öğelerinin sağ tarafına 1 piksellik bir boşluk bıraktık. Font ile de liste öğeleri içerisindeki yazıların kalın, 12 piksel boyutunda ve Arial fontuyla görünmesi gerektiğini belirttik.

3. bölüm :

Üçüncü bölümde liste öğeleri içerisinde yer alan ve A etiketi ile oluşturduğumuz menü linklerini biçimlendirdik. Display ile menü linklerine genişlik değerinin atanabilmesini sağladık. Padding ile üstten ve alttan uzaklık değerlerini belirledik. Width ile de menü linklerinin 85 piksel olmasını sağladık. Border-top ile menü linklerinin üstüne bir çizgi çekip, Color ile de yazı rengini belirledik. Text-align ile yazıların ortaya hizalanmasını, Text-decoration ile de bu yazıların altındaki çizgilerin kaybolmasını sağladık.

4. bölüm :

Bu son bölümde ise fare ile menü linklerinin üzerine gelindiğinde oluşacak görüntüyü elde ediyoruz. Padding-bottom ile ilgili menü linkinin aşağıya doğru 8 piksel sarkmasını sağlıyoruz. Border-top ile 3. bölümde çizdiğimiz çizginin renk değerini değiştiyoruz. Background ile de ilgili menü linkinin arkaplan rengini değiştirip, hazırlamış olduğumuz "mouse-over.png" görselinin görünmesini sağlıyoruz.

Böylece hazırlamış olduğumuz bütün CSS kodlarının son hali şu duruma geldi:

Sonuç…

Bence yeterince güzel, yapımı kolay ve kullanışlı bir menü ortaya çıktı Ya sizce? Hazırladığımız bu menünün çalışır haline buradan ulaşabilirsiniz. Ayrıca bu menünün 5 farklı renk seçeneğini de hazırlayıp bir paket haline de getirdim. Bu pakedi eBurhan Araçları sayfasına girerek eburhan Sarkan Menüler ismiyle indirebilirsiniz.

eburhan