jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2014年7月2日
この記事は掲載から1843日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

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

サンプル

Javascript

[js]
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();
});
});
[/js]

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP