【jQuery】サブメニュー(様々なリストの書き方に対応)

マウスのロールオーバーで、サブメニューが右に表示されます。

【実演ページ】
http://www.usamimi.info/~sutara/sample/jq_submenu.html

ソースを見てもらえれば分かりますが、
メニューの構造に合わせてリストタグをツリー状に記述していたり、
メニューの階層ごとにまとめて記述していたり、
様々なリストの書き方に対応してサブメニューを表示するようにしています。

処理のキモ

メニューの構造通りにツリー状に記述されたリストならば、下記でOKです。

$(メインメニューのli要素).hover(

	//mouseover時

	function(){$(this).children('ul').show()},

	

	//mouseout時

	function(){$(this).children('ul').hide()}

);

が、そうでない場合にも対応するため、下記のようにしています。

$(メインメニューのli要素).hover(

	//over

	function(){

		var idx = $(メインメニューのli要素).index(this);

		$(サブメニューのul要素).eq(idx).show();

	},

	//out

	function(){

		var idx = $(メインメニューのli要素).index(this);

		$(サブメニューのul要素).eq(idx).hide();

	}

);

さらに、下記も必要です。

$(ツリー状以外のサブメニューのli要素).hover(

	//over

	function(){$(this).show()},

	//out

	function(){$(this).hide()}

);