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

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

sponsors

使用方法

今回は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;
}

サンプル

sponsors

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