CSS ile Menü Yapmak IV – Yatay Açılır Menüler
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
<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.
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.
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.
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:
ul#menu li > ul {
top: auto;
left: auto;
}
Görünümü biraz güzelleştirelim:
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;
}
Ö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.
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.
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
çok teşekkürler
Merhaba öncelikle güzel çalışmalarınızdan dolayı kutluyorum sizi gerçekten siteniz çok güzel bir kaynak durumunda yatay açılır menu ile ilgili bir sorum olacak ben ana list altında açılan menunun genişliginin farklı olmasını istiyorum yanı aşağiya açılan lıstenın butun elemanlarını aynı genıslıkte ama ana listtekinden farklı olmasını biraz ugrastım ama halledemedım yardımcı olabılırseniz sevinirim.
Merhaba Fatih Bey;
Benim sorunum biraz garip. Yada ben işin içinden çıkamadım. Aşağıda tüm dosyaları veriyorum. Şöyle kısa bir özet geçeyim.
Öncelikle sayfamı 3 sütuna böldüm. sonra ortadaki sütünu 4 satır halinde ayırdım. menüyü ikinci satıra yerleştiriyorum. ancak 3. satırdaki esas site içeriğinin arkasında açılıyor. position’ları ayarlamaya çalıştım ancak içinden çıkamadım bir türlü.
Zamanınızı alıyorum kusura bakmayın. Yardımcı olursanız çok sevinirim…
http://www.dayininyeri.net/elab_new/new_elab.rar
Eğer ul#menu li a tanmına bir genişlik tanımlarsak bu sorunu halledebiliyoruz. width:150px;
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;
width:150px;
}
bu sefer başka bi ufak sorun var.ie de menü açıldığında mouse muzu kutu içindeki yazı dışına çektiğimizde aktif olmuyor.yani yazının üzerindeyken kutucuğumuz aktif fakat kutu içindeyken yazı dışına çıktığımızda o kutucuk inaktif oluyor.ufak bi sorun ama merak ettim.İlgilenirseniz sevinirim fatih bey.İyi çalışmalar.
arkadaşlar hatamı buldum.
ul#menu li {
color:#000;
float: left;
position: relative;
width: 150px;
background: #efefef;
}
yukarıdaki koda background: #efefef; kısmını eklediğimizde sorun ortadan kalkmaktadır.Fakat neden böyle bişey oldğunu anlamış deilim.Aynı sorunla karşılaşanlar bunu denesin.Herkese iyi çalışmalar.
Benim sorunumda bi arkadaşın belirrtiği gibi.ie da bir menüyü açtığımda 1.linkten sonra aşağı inemiyorum.Diğerleri hemen kayboluyor.ilgilenirseniz sevinirim..
iyi çalışmalar….
merhaba fatih bey,
çok özür dilerim css yi aceleden unuttum fakat şimdi yeniledim. yeni halde attım ftp ye. firefox 2.0 da sorun yok ie 6 da sorun var. menulerin üzerine gelince alt menüler açılıyor evet yalnız hemen kayboluyor. ie7 de sorun yok ama herkes ie7 kullanmıyor diye ie6 da test ettim ve bu sorunu aldım. java kodlarını include ettiğim menu.php içine attım head tagının içine. ama yine de ie6 da sorunum devam ediyor.
ilginiz için teşekkür ederim.
Dökümnaları aldım ve css kodu ekledim çünkü kodun içinde css kodları yoktu ve firefox2.0, ie7.0 ve opera9.0 da denedim bir sorun görümüyor.
Merhaba Fatih bey,
bilgiler için teşekkür ederim. css de yeniyim. burada anlatılan herşeyi denedim. menüleri oluşturdum ve bir altında include ettim. menülerde sorun yok. hatta javascript fonksiyonunu da ekledim. kutular çalışıyor ama alttaki menülere gelince hemen yok oluyor. örnekteki kodları aynen aldım ve yaptığım menu.php dosyasına ekledim. main.css dosyasına da css kodlarını ekledim. yine aynı durumla karşılaştım. bir türlü çözemedim. dosyaları http://www.kadirgunay.info/safari/2.rar olarak siteme koydum. vaktiniz olduğunda bakabilirseniz sevinirim. çok teşekkür ederim. iyi çalışmalar.