CSS Yatay Açılır Menü - Asp.NET Dersleri

Yatay Açılır Menü (Aşağı Doğru Açılan Menü)

Aşağıda basit bir yatay açılır menü tasarlanmıştır. Kodlar değiştirilerek istenen hale getirilebilir.

#yanMenu ul { } yanMenu içindeki tüm ul etiketlerini biçimlendirir. Satırların başındaki işaretler kaldırılmış ve margin ile padding sıfırlanarak tüm elemanların aynı hizaya gelmeleri sağlanmıştır.

#yanMenu li { } yanMenu içindeki tüm li etiketlerini biçimlendirir. Float:left yapılarak li'lerin yanyana yerleşmeleri sağlanmıştır. Genişlikleri ise 150 px yapılmıştır.

#yanMenu li ul { } yanMenu içinde olup ayrıca li etiketleri arasında olan ul etiketlerini biçimlendirir. Bu ul etiketleri ilgili eleman üzerine gelindiğinde aşağıya doğru açılacak listelerdir. Burada display:none yapılarak bu listelerin normalde görünmemeleri sağlanmıştır. Ayrıca pozisyon ve konum ayarları yapılarak yerleri ayarlanmıştır.

#yanMenu li:hover ul { } yanMenu içinde olup üzerine gelinen li içindeki ul etiketini biçimlendirir. Display:block yapılarak üzerine gelinen li içindeki listenin görünür hale gelmesi sağlanmıştır.

#yanMenu li a { } yanMenu içinde ve li etiketleri arasında olan a etiketlerini biçimlendirir.

#yanMenu li a:hover { } yanMenu içinde ve li etiketleri arasında olan a etiketlerinin hover durumlarını biçimlendirir.

Html Kısmı:

<div id="yanMenu"> <ul> <li><a href="#">Aaa</a></li> <li><a href="#">Bbb</a>

<ul> <!-- Alt listelerin li etiketleri arasında olmasına dikkat --> <li><a href="#">Ccc</a></li> <li><a href="#">Ddd</a></li> <li><a href="#">Eee</a></li> <li><a href="#">Fff</a></li> </ul>

</li> <li><a href="#">Ggg</a></li> <li><a href="#">Mmm</a>

<ul> <li><a href="#">Nnn</a></li> <li><a href="#">Ooo</a></li> <li><a href="#">Ööö</a></li> <li><a href="#">Ppp</a></li> <li><a href="#">Rrr</a></li> </ul>

</li> <li><a href="#">Sss</a></li> <div style="clear:both"></div> <!-- Yan yana yerleşen son elemandan sonra float özelliğinin etkisini kaldırıyoruz. --> </ul>

</div>

CSS Kısmı:

#yanMenu {padding:0px; }

#yanMenu ul { margin:0px; padding:0px; list-style-type:none; }

#yanMenu li { float:left; /* li etiketlerinin yan yana yerleşmesini sağlıyoruz */ position:relative; /* İçteki ul'lerin buraya bağlı konumlandırılmasını sağlıyoruz */ width:150px; }

#yanMenu li ul { display:none; /* içteki listelerin başlangıçta görünmemesini sağlıyoruz */ position:absolute; /* Konumu ayarlayabilmek için */ left:0px; /* soldan uzaklığı kendi menümüze göre ayarlıyoruz*/ top:29px; } /* üstten uzaklığı kendi menümüze göre ayarlıyoruz */

#yanMenu ul li a { background-color:pink; border:1px solid red; color:red; font-weight:bold; display:block; margin:0px; padding:2px; text-decoration:none; line-height:24px; text-align:center; }

#yanMenu ul li a:hover { background-color:white; color:gray;}

#yanMenu li:hover ul { display:block;} /* üzerine gelinen li içindeki ul'yi görünür hale getiriyoruz. */

css yatay açılır menü, aşağı açılan menü yapma, yatay açılır menü nasıl yapılır, css menü örnekleri, yatay menü örnekleri

KONU İLE İLGİLİ ÖRNEKLER

Yatay Açılır Menü Örneği ve Kodları

Kendin Dene

Kendin Dene butonuna tıklayarak örnek açılır menüyü görebilir ve kodlarını değiştirerek kendin deneyebilirsin.