シンプルな開閉式メニュー

jQueryが素敵なのは、こんな3行だけで開閉式メニューが出来てしまう。

$(‘ul li’).hover(function(){
$(this).find(‘ul’).slideToggle(500);
});

これでも結構奇麗に動作するが、やはりイベントが多数発生して暴れる、そしてIE6が・・・

ポイント
・hoverイベントだと下位要素からイベントがバブリングして来るので、上位エレメントからの出入りだけをチェックするためmouseenter , mouseleaveを使う。
・動いている要素は除外する:not(:animated)。

ドロップダウンなら

$('ul li').mouseenter(function(){
	$(this).find('ul:not(:animated)').show(500);
});
$('ul li').mouseleave(function(){
	$(this).find('ul:not(:animated)').hide(500);
});

アコーディオンなら

$('ul li').mouseenter(function(){
	$(this).find('ul:not(:animated)').slideDown();
});
$('ul li').mouseleave(function(){
	$(this).find('ul:not(:animated)').slideUp();
});

ところで、wpのナビメニューに適用させようとしたら、もう一工夫必要

jQuery(document).ready(function($){
	$('#access .menu-header > ul li').mouseenter(function(){//リスト項目にマウスが入ったらDD表示
    $(this).find('ul:not(:animated)').show(500);
});
	$('#access .menu-header > ul li').mouseleave(function(){//マウスが離れたらDD隠す
    $(this).find('ul:not(:animated)').hide(500);
});
	$('#access ul.sub-menu').mouseleave(function(){//マウスが下に移動（サブメニューにマウスが入ったら
    $(this).hide(500);
});


});

リスト項目から出る時の動作と、サブメニューから離れた時の処理を併記する。
リスト項目のサイズが、ドロップダウン時に拡張すればこのような記述は要らないが、ドロップダウンのulがposition:absoluteのせいで、拡張はされない。
この場合、リスト項目をabsoluteでサブメニューをrelativeで、と組み替える方法もあるが、メニューの位置決めが面倒。
そこで、サブメニューをメニューとスキマなくぴったりと配置すればOK。
ドロップダウンとリスト項目の間にスキマが空くと、下方向に動く時にドロップダウンが消えてしまうので注意。デザイン上スキマが必要であれば、透明にして小要素に色を付ければ良い。
この場合はマウスが下に移動時、mouseleaveが発生してサブメニューが消えてしまいそうで怖いが、Fox,Chrome,IEで問題なし。
（逆にこれが不思議だけど結果オーライで・・・不安なら$(‘#access ul.sub-menu’).mouseenter〜を加えるといいかも）

あ、これ前にやったな・・・