｜ ｜ ｜ ｜

グローバルメニューにドロップダウンでサブカテゴリまで表示させることがあります。
でも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>


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

記事作成：2010年03月05日