メガメニューをJavaScriptで作る:via 「Make a Mega Drop-Down Menu with jQuery」

昨今海外サイトを中心に流行りの兆しを見せているメガメニュー。
メニューに関する情報を一覧で見せられるのでユーザビリティにも良いと言われています。
via:Make a Mega Drop-Down Menu with jQuery
メガメニューをJavaScriptで作る:via 「Make a Mega Drop-Down Menu with jQuery」サンプル

使用方法
今回はJavaScriptライブラリのjQueryプラグイン「hoverIntent」を使用します。
またjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script>
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
$(".class名").hoverIntent( //
interval: 200,
sensitivity: 4,
over: addMega,
timeout: 300,
out: removeMega
)
});
</script>

あとはメニューを記述すれば完成です。
<ul>
<!-- ここからメニュー一個分 -->
<li class="class名">
<h2>
<a href="#">メニュー名</a>
</h2>
<div>
メガメニューコンテンツ部分
</div>
</li>
<!-- ここまでメニュー一個分 -->
<!-- 以下メニュー分繰り返し -->
</ul>

あとはCSSに以下を加えます。
ul div {
display: none;
}

ul li.class名 div {
position: absolute;
top: 1.6em;
left: 0em;
}
ul li.hovering div {
display: block;
}

メガメニューをJavaScriptで作る:via 「Make a Mega Drop-Down Menu with jQuery」サンプル

sponsors

「メガメニューをJavaScriptで作る:via 「Make a Mega Drop-Down Menu with jQuery」」をシェアする

記事作成:
記事URL:

TOP > > > メガメニューをJavaScriptで作る:via 「Make a Mega Drop-Down Menu with jQuery」