スライドダウンするナビゲーション #1
2014年07月02日
ナビゲーションで子メニューをスライドさせて表示させます。
この手のライブラリは沢山あるのですが、様々な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(); }); });