jQuery – マウスオーバーで表示するドロップダウンメニュー(レスポンシブ対応)

マウスオーバーでドロップダウンメニューを表示するjQueryのコードとCSSです。
768px以下になるとスマホ表示となり、ハンバーガーメニュー内でドロップダウン無しで表示されるようになります。

サンプル

See the Pen ドロップダウンメニュー by ponzu (@ponzu) on CodePen.

html

クラス名 .dropdown をつけたものがドロップダウンメニューとして表示されるようになっています。

<header>
<nav class="globalnav-wrap">
  <h1>LOGO</h1>
  <div class="nav-button-wrap">
    <div class="nav-button">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <ul class="globalnav">
    <li class="dropdown-btn">
      メニュー1
      <ul class="dropdown">
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
      </ul>
    </li>
    <li class="dropdown-btn">
      メニュー2
      <ul class="dropdown">
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
        <li><a href="#">ドロップダウンメニュー</a></li>
      </ul>
    </li>
  </ul>
</nav>
</header>

jQuery

jQueryはドロップダウンメニューの表示/非表示と、スマホ表示にした時のグローバルナビの開閉に分かれています。

// ドロップダウンメニュー
$('.dropdown-btn').hover(
  function() {
    //カーソルが重なった時
    $(this).children('.dropdown').addClass('open');
  }, function() {
    //カーソルが離れた時
    $(this).children('.dropdown').removeClass('open');
  }
);

// グローバルナビの開閉
$(function() {
  $('.nav-button-wrap').on('click', function() {
    if ($(this).hasClass('active')) {
      // スマホ用メニューが表示されていたとき
      $(this).removeClass('active');
      $('.globalnav').addClass('close');
      $('.globalnav-wrap , body').removeClass('open');
    } else {
      // スマホ用メニューが非表示の時
      $(this).addClass('active');
      $('.globalnav').removeClass('close');
      $('.globalnav-wrap , body').addClass('open');
    }
  });
});

RELATED POSTS