スライドダウンするナビゲーション #1

ナビゲーションで子メニューをスライドさせて表示させます。

この手のライブラリは沢山あるのですが、様々なUIがパッケージ化されていたりなど、読み込むjavascriptファイルが多くちょっと面倒だったりするのでシンプルなものを。CSSはサンプルを参考にして下さい。

サンプル

Javascript

jQuery(document).ready(function(){

//親メニューにマウスが乗ったら
    jQuery(document).on('mouseover','.navi',function(){
      jQuery("#navigation ul li ul").hide();
      jQuery(this).next("ul").show();
    });
//子メニューからマウスが離れたら
    jQuery(document).on('mouseleave','.child',function(){
      jQuery("#navigation ul li ul").hide();
    });
//メニュー全体からマウスが離れたら
    jQuery(document).on('mouseleave','#navigation',function(){
      jQuery("#navigation ul li ul").hide();
    });
});