[JS]メガドロップダウン型のナビゲーションを実装するスクリプト -Mega Menu

豊富なコンテンツを設置できるメガドロップダウンを実装するスクリプトをGeek Tantraから紹介します。

デモでは四種類メガドロップダウンがあり、データ量によってドロップダウンするパネルの幅が成り行きのもの、指定した幅のもの、表示位置が成り行きのもの、右寄せのものがあります。

実装は簡単で、スクリプトを外部ファイルとし、下記のようなスクリプトを記述します。

<script type="text/javascript">
$(document).ready(function(){
	$(".MegaMenuLink").megamenu(".MegaMenuContent", {
		width: "900px"
	});
});
</script>

ドロップダウンするパネルには自由に要素を配置することが可能で、div要素内に配置します。

Mega MenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2010年3月8日

on 2010年3月8日

[...] – 100SHIKI ～世界のアイデアを日替わりでlivedoor:3 [JS]メガドロップダウン型のナビゲーションを実装するスクリプト -Mega Menu …livedoor:3 オープン戦：高橋尚成好投newsing:1 [...]