【jQuery】ホバーで動くドロップダウンメニューを実装

ちょっと大きなホームページを作ると、グローバルメニューに下層メニューを置きたくなりますよね。

jQueryを使えば簡単にドロップダウンメニューを実装できます。

【html】

<nav>
  <ul class="dropdown">
    <li><a href="./index.html" title="HOME">HOME</a></li>
    <li class="hover">
      <a href="./about/about.html">大メニュー1</a>
      <ul class="dropmenu cf">
        <li><a href="./about/about.html">下層1-1</a></li>
        <li><a href="./about/greeting.html">下層1-2</a></li>
        <li><a href="./about/history.html">下層1-3</a></li>
        <li><a href="./about/member.html">下層1-4</a></li>
      </ul>
    </li>
    <li class="hover">
      <a href="./activity/upcoming_list.html">大メニュー2</a>
      <ul class="dropmenu cf">
        <li><a href="./activity/upcoming_list.html">下層2-1</a></li>
        <li><a href="./activity/annual_list.html">下層2-2</a></li>
      </ul>
    </li>
    <li class="hover">
      <a href="./publication/journal.html">大メニュー3</a>
      <ul class="dropmenu cf">
        <li><a href="./publication/journal.html">下層3-1</a></li>
        <li><a href="./publication/rmb.html">下層3-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

【js】

$(function(){
    $('.dropdown li.hover').hover(function(){
        $(this).children('ul').show();
    }, function(){
        $(this).children('ul').hide();
    });
});

今回は2階層のシンプルな構造ですが、もっと階層を増やすことも可能です。

リンク