ロゴ
menu
HOME > ｊQuery・Javascript > スライドダウンするナビゲーション #1

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

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

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

サンプル

Javascript

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();
    });
});