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>
<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>
</ul>
</div>
CSS Kısmı:
#yanMenu {padding:0px; }
#yanMenu ul {
margin:0px;
padding:0px;
list-style-type:none; }
#yanMenu li {
float:left;
position:relative;
width:150px; }
#yanMenu li ul {
display:none;
position:absolute;
left:0px;
top:29px; }
#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;}
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
Kendin Dene butonuna tıklayarak örnek açılır menüyü görebilir ve kodlarını değiştirerek kendin deneyebilirsin.
27936 kez okundu.