ドロップダウンメニュー jQuery レスポンシブデザインの実装方法

<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">
        メニュー１
        <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>

// ドロップダウンメニュー
$('.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');
    }
  });
});

header {
  width: 80%;
  margin: 0 auto;
}

.globalnav-wrap {
  font-size: 16px;
  color: #fff;
  background: #333;
  display: flex;
  justify-content: space-between;
}

.globalnav {
  /* メニュー項目のスタイル */
  .dropdown-btn {
    position: relative;
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    &:hover {
      background: #666;
    }
  }

  /* ドロップダウンメニューのスタイル */
  .dropdown {
    z-index: 1000;
    background: #666;
    position: absolute;
    left: 0;
    top: 55px;
    width: 200px;
    padding: 10px 20px;
    display: none; /* 初期状態では非表示 */

    li {
      display: inline-block;
      margin: 10px 0;

      a {
        color: #fff;
      }
    }
  }

  /* ドロップダウンメニュー表示時のスタイル */
  .open {
    display: block; 
  }

  /* ハンバーガーメニューのスタイル */
  .nav-button-wrap {
    display: none; /* 初期状態では非表示 */
  }
}

/* 768px以下の画面幅用のスタイル */
@media screen and (max-width: 768px) {
  header {
    position: relative;
    width: 100%;
  }

  .globalnav-wrap {
    /* ハンバーガーメニューを表示 */
    .nav-button-wrap {
      display: block;
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 1000;
      cursor: pointer;
      padding: 15px;
      height: 53px;

      /* ハンバーガーメニューの線 */
      .nav-button {
        /* ハンバーガーメニューのアニメーションはNx World様のコードを利用 */
        /* ... */
      }
    }

    /* グローバルナビゲーションを非表示 */
    .globalnav {
      display: none; 

      .close {
        display: none; 
      }
    }

    /* メニュー表示時のスタイル */
    &.open {
      .globalnav {
        display: block;
        padding: 40px 20px 0;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        li {
          display: block;
        }

        li:hover {
          background: transparent;
        }

        .dropdown {
          /* ドロップダウンメニューを非表示 */
          display: none;
          position: static;
          background: transparent;
        }
      }
    }
  }
}