jQueryでオリジナルのメガドロップダウンメニューを作成する

jQueryを使って簡単なメガドロップダウンメニューです。

このブログのグローバルメニューでも使っている、簡易的なメガドロップダウンメニューです。
このブログをサンプルに説明したいと思います。コードは見やすいように、要点のみの抜き出しています。また、jQueryのバージョンは1.4.2ですが、1.3系でも動作するはずです。

まずはHTML部分ですが、ulタブで２段階に組みます。１段目がカテゴリメニュー、２段目がサブカテゴリメニューというイメージです。
２段目のulについてはデフォルトで「display: none;」というようにして、非表示状態にします。

<ul id="Gmenu">

<li class="parent">
<a href="/category/php/">PHP</a>
<ul style="display: none;">
<li><a href="/category/php/pear/">PEAR</a></li>
<li><a href="/category/php/smarty/">Smarty</a></li>
<li><a href="/category/php/xampp/">xampp</a></li>
<li><a href="/category/php/zend-framework/">Zend Framework</a></li>
</ul>
</li>

<li class="parent">
<a href="/category/api-2/">API</a>
<ul style="display: none;">
<li><a href="/category/api-2/google-maps/">Google Maps API</a></li>
<li><a href="/category/api-2/twitter-api/">Twitter API</a></li>
<li><a href="/category/api-2/rakuten_api/">楽天API</a></li>
</ul>
</li>

<li class="parent">
<a href="/category/hp/">HTML/CSS</a>
<ul style="display: none;">
<li><a href="/category/hp/css-2/">CSS</a></li>
<li><a href="/category/hp/html-2/">HTML</a></li>
<li><a href="/category/hp/html5/">HTML5</a></li>
</ul>
</li>

</ul>

次にCSS部分です。ポイントはドロップダウンでオープンする２段目のulタグ「#Gmenu .parent ul」のレイアウトが他の要素に影響しないように「position: absolute;」とすることです。また、他の要素の裏に隠れてしまわないように「z-index」を設定します。

#Gmenu .parent{
	position: relative;
	display: block;
	height: 30px;
	line-height: 0;
}
#Gmenu .parent ul{
	position: absolute;
	background: url('/images/gmenu_bg_pulldown.png') repeat-x 0 bottom;
	border: 1px solid #000000;
	padding: 7px 10px;
	width: 130px;
	z-index: 1;
}
#Gmenu .parent ul li{
	display: block;
	background: url('/images/mark05.png') no-repeat 0 center;
	text-indent: 10px;
}

最後にJavaScript処理です。
全てのクラスが「parent」の要素、つまり１段目のliタグにロールオーバー処理を追加します。その内容はオーバー時に２段目のul要素を表示、マウスアウト時に隠すという処理を起票時に実行します。

$('#Gmenu').find('.parent').each(function(){
	$(this).hover(
		function(){
			$(this).find('ul').fadeIn();
		},
		function(){
			$(this).find('ul').fadeOut();
		}
	);
});

以上で、このサイトのようなメガドロップダウンメニューを構築することができます。
簡単ですね。

以前にJavaScriptのみでメガドロップダウンメニューを構築した際には苦労しましたが、jQueryを使うとこんなにも簡単に構築することができるんですね。