jQuery Acordion Dik Menu

jQuery ile acordion menu yapmanın çok yolu var fakat sadece kütüphanesinin gücünü kullnarak basit bir acordion menü yapmak mümkün.

jQuery(document).ready(function () {
  jQuery('#menu-kategoriler > li > a').mouseover(function(){
    if (jQuery(this).attr('class') != 'active'){
      jQuery('#menu-kategoriler li ul').slideUp();
      jQuery('#menu-kategoriler .sub-menu').slideUp();
      jQuery(this).next().slideToggle();
      jQuery('#menu-kategoriler li a').removeClass('active');
      jQuery('#menu-kategoriler .sub-menu').removeClass('active');
      jQuery(this).addClass('active');
    }
  });
});
​

jquery kütüphanesi ile birliktteki üstteki kod yapısı acordion menü oluşturacak ve alt menüleri gizleyip üst kategoriye gelince altındaki kategorileri gösterecektir.

Bu acordion menü mouseover yani mouse üst kategoriye gelince alt kategorileri gösterecek biçimdedir. Bunu tıklanacak biçimde yapmak için mouseover yerini click yapmanız yeterlidir.

html yapısı aşağıki gibidir. Ben linksiz gösteriyorum linklerle de çalışır.

ve css

#menu-kategoriler li a:hover, #menu-kategoriler li a.active {
        display:block
}
.active {
        display:block
}
#menu-kategoriler li ul {
    display:none

}
#menu-kategoriler .sub-menu .sub-menu {
    display:block !important;
}​

“jQuery Acordion Dik Menu” için 2 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir