Bu yazımızda, Olay Fonksiyonlarında, olay tutuculardan (Event Handlers) ".on()" yapısını kullanarak akordiyon (accordion) menü (Açılır menü) uygulaması yapacağız.
Uygulama:
CSS yapısı:
#menu_acc{
width:200px;
list-style:none;
margin-bottom:2px;
}
#menu_acc li{
margin-bottom:2px;
}
.root_menu_acc ul li a{
color:#71caf9;
text-decoration:none;
}
.root_menu_acc{
border-radius:4px;
padding:3px 0px 3px 0px;
background:yellowgreen;
color:#fff;
cursor:pointer;
}
.root_menu_acc>ul{
list-style:none;
padding: 3px 0px 3px 0px;
background:#f5f5f5;
color:black;
}
.root_menu_acc>ul>li{
padding-left:30px;
}
.root_menu_acc>a{
color:white;
text-decoration:none;
padding:5px;
}
HTML yapısı:
<ul id="menu_acc">
<li class="root_menu_acc"><a href="#">Üst Menü</a>
<ul>
<li><a href="#">Alt menü 1</a></li>
<li><a href="#">Alt menü 2</a></li>
<li><a href="#">Alt menü 3</a></li>
</ul>
</li>
<li class="root_menu_acc"><a href="#">Üst Menü 2</a>
<ul>
<li><a href="#">Alt menü 4</a></li>
<li><a href="#">Alt menü 5</a></li>
<li><a href="#">Alt menü 6</a></li>
</ul>
</li>
<li class="root_menu_acc"><a href="#">Üst Menü 3</a>
<ul>
<li><a href="#">Alt menü 7</a></li>
<li><a href="#">Alt menü 8</a></li>
<li><a href="#">Alt menü 9</a></li>
</ul>
</li>
</ul>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Alt menüler gizleniyor
$('#menu_acc ul').hide();
//'ul' etiketine sahip 'li' etiketleri
$('#menu_acc li').has('ul').on('click',function(e){
//Tüm alt menüler kapatılıyor
$('#menu_acc ul').stop().slideUp(300);
//Basılan üst menünün alt menüleri açılıyor
$(this).children('ul').stop().slideDown(300);
});
});
</script>
Açıklamalar:
- 5. Listedeki tüm alt menüler kapatılıyor (.hide())
- 8. 'ul' etiketine sahip 'li' etiketleri, ".on()" yapısı ile "click" olayıyla ilişkilendiriliyor
- 11. Üst menü tıklandığında, açık tüm alt menüleri kapatıyoruz
- 14. Tıklanan üst menünün alt menüleri açılıyor.
Kolay gelsin, görüşmek üzere...
