Dikey Açılır Menü (Yana Doğru Açılan Menü)
Aşağıdaki örnekte basit bir açılır menü tasarlanmıştır. İstenen özellikler kolaylıkla deşiştirilebilir.
Burada açılır menü yanMenu sınıf seçicisinin uygulandığı bir kutu(div) içine alınmıştır. Stiller oluşturulurken de yanMenu içindeki elemanlar biçimlendirilerek, başka yerlerdeki ul, li ve a'ların etkilenmemesi sağlanmıştır.
Bazı yerleri açıklarsak;
.yanMenu ul { } yanMenu içindeki tüm ul etiketlerini biçimlendirir.
.yanMenu li { } yanMenu içindeki tüm li etiketlerini biçimlendirir.
.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 yana 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.
Bu örnekte en iyi anlaşılması gereken yerler position:relative ve position:absolute uygulanan yerlerdir. Bu kısımları şöyle açıklayalım:
Yana doğru açılacak olan ul elemanları (.yanMenu li ul ) ilk anda gizli olup yer kaplamamaktadır. Ancak o li üzerine gelindiğinde görünür hale gelecek ve yer de kaplayacaklarından, diğer li elemanları aşağı kayacaktır. Bu yüzden bu elemanlara position:absolute uygulamak zorundayız. Ancak bu sefer de bu elemanlar bulundukları yerden bağımsız hale gelecek ve konumları pencere kenarlarına göre ayarlanacaktır. Yani top:0 dendiğinde pencerenin üst kenarından 0 piksel uzaklığa yerleşecektir. Bunu önlemek için li elemanlarına position:relative uygulanmıştır. Bu sayede o li'lerin içindekiler konum olarak li'lere bağlı kalacak, absolute yapılanlar ise o bölgede yer kaplamayarak kaymaya sebebiyet vermeyecektir.
Aşağıdaki açılır menü örneğini inceleyiniz. Üzerine gelince başka bir menü açılacak olan li etiketlerinin içlerine, ul ile bir alt liste oluşturulmuştur. Ve bu içteki ul etiketleri display:none yapılarak görünmez hale getirilmiştir.
Örneğin çalışan hali ve tam kodları Konu Örnekleri kısmında mevcuttur.
Html Kısmı
<div class="yanMenu">
<ul>
<li><a href="#">Aaa</a></li>
<li><a href="#">Bbb</a>
<ul> <!-- Bu listenin li etiketleri arasında yer aldığı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="#">Hhh</a></li>
<li><a href="#">Jjj</a></li>
<li><a href="#">Kkk</a></li>
<li><a href="#">Lll</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>
</ul>
</div>
Css Kısmı
a{color:black; text-decoration:none;}
a:visited{color:black; text-decoration:none;}
a:hover{color:black; text-decoration:none;}
a:active{color:black; text-decoration:none;}
.yanMenu ul {
margin:0px;
padding:0px;
list-style:none; /* Madde işaretlerini kaldırdık */
width:150px;
border-bottom:1px solid red;
}
.yanMenu li {
position:relative;
}
.yanMenu li ul {
position:absolute;
display:none;
left:149px;
top:0px;
}
.yanMenu li:hover ul {display:block; }
.yanMenu li a {
display:block;
background-color:pink;
border:1px solid red;
border-bottom:0;
padding:5px;
}
.yanMenu li a:hover {
background-color:white;
color:red;
}
css ile dikey açılır menü yapma, css menü örnekleri, css yana doğru açılan menü yapma
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.
18919 kez okundu.