メガメニューを簡単に実現するJavaScript「jQuery Mega Menu」

グローバルメニューにドロップダウンでサブカテゴリまで表示させることがあります。
でもECサイトなどではサブカテ多すぎて・・・なんて方にメガメニューをお勧めします。
JavaScriptを使用して簡単に導入できるjQuery Mega Menu | GeekTantraを紹介します。

使用方法

jQuery Mega Menu | GeekTantraからファイル一式をダウンロードします。

<link rel="stylesheet" href="jquery.megamenu.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.megamenu.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".メニューのclass名").megamenu(
		".メガメニューのclass名",{
		width: "850px" //メガメニュー幅
	});
});
</script>
あとは以下のようにメニューを記述すれば完成です。

<a class="メニューのclass名" href="javascript:void(0)">メニュー名</a>
<div class="メガメニューのclass名">
	ここにメガメニュー内容
</div>

サンプル

First Mega Menu
First Heading
Second Heading
Third Heading
Second Mega Menu
First Heading
Second Heading
More text can go here.

Javascriptサンプルページ一覧
skuare.net