ハンバーガーメニューの動作不良改善策

前提・実現したいこと

メディアクエリにてiPad,iPhone画面にてハンバーガーメニューを実装。検証ツールでハンバーガーメニュー動作確認後、PC画面サイズにすると初期メニュー(横並びメニュー)が表示されない。この原因、打開策の提案を頂きたいです。

発生している問題・エラーメッセージ

一度、スマホサイズでハンバーガーメニューの動きを確認した後、元のPC画面サイズにすると元々の横並びのメニューが表示されない。

該当のソースコード

--HTML--
<!-- header -->
    <header class="header">
      <div class="header__inner">
        <div class="header__logo">
          <h1 class="header__copy"><a href="#"> Italiano Tres biano </a></h1>
        </div>
        <nav class="header__nav">
          <ul class="header__list">
            <li class="header__item"><a href="#">home</a></li>
            <li class="header__item"><a href="#">menu</a></li>
            <li class="header__item"><a href="#">access</a></li>
            <li class="header__item"><a href="#">contact</a></li>
          </ul>
        </nav>
      </div>

      <div id="hamburger" class="hamburger">
        <span class="hamburger__bar"></span>
        <span class="hamburger__bar"></span>
        <span class="hamburger__bar"></span>
      </div>
    </header>
    <!-- /header -->

    <!-- top-mv -->
    <div class="mv"></div>
    <!-- /top-mv -->
--HTML--

--CSS--
html,
body {
  font-family: serif;
  height: 100%;
  width: 100%;
}

/* ===== header ===== */
.header {
  padding: 0 192px;
}
.header__inner {
  display: flex;
  margin: 40px auto;
  justify-content: space-between;
  width: 100%;
  position: relative;
}
.header__copy {
  font-size: 32px;
}
.header__list {
  display: flex;
}
.header__item {
  font-size: 24px;
  margin-left: 32px;
}
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35px;
  right: 30px;
  cursor: pointer;
  z-index: 999;
}
.hamburger__bar {
  display: block;
  width: 20px;
  height: 1px;
  background-color: #333;
  position: absolute;
  left: 15px;
  transition: 0.3s;
}
.hamburger__bar:nth-of-type(1) {
  top: 10px;
}
.hamburger__bar:nth-of-type(2) {
  top: 20px;
}
.hamburger__bar:nth-of-type(3) {
  top: 30px;
}
.hamburger.is-active .hamburger__bar:nth-of-type(1) {
  top: 20px;
  transform: rotate(45deg);
}
.hamburger.is-active .hamburger__bar:nth-of-type(2) {
  left: 30px;
  opacity: 0;
}
.hamburger.is-active .hamburger__bar:nth-of-type(3) {
  top: 20px;
  transform: rotate(-45deg);
}
body.is-active {
  overflow: hidden;
}
@media screen and (max-width: 1080px) {
  .header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 998;
    background-color: #fffd;
    display: none;
  }
  .header__list {
    display: block;
    line-height: 4;
    text-align: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hamburger {
    display: block;
  }
}
/* ===== top-mv ===== */
.mv {
  background: url(../img/mv.jpg) center top / cover;
  height: 100vh;
  margin-bottom: 48px;
  position: relative;
}
.mv::after {
  content: 'Italiano Trea biano';
  position: absolute;
  top: 50%;
  left: 12%;
  color: #fff;
  font-size: 48px;
}
--CSS--

--JQuery--
/* ===== hamburger ===== */
  $('#hamburger').on('click', function () {
    $('.hamburger').toggleClass('is-active');
    $('.header__nav').fadeToggle();
    $('body').toggleClass('is-active');
  });
--JQuery--

試したこと

JQueryにてheader__navクラスにfadeToggleを指定。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

harami_

2021/11/24 07:50

> PC画面サイズにすると初期メニュー(横並びメニュー)が表示されないこの事象が再現できません。画面幅1081px以上でflexメニューが表示されます。

nao__funky

2021/11/24 13:21

「ハンバーガーメニューをクリックしてナビを表示させた後、×ボタンをクリックしてナビを非表示にしてから、ウィンドウサイスを広げたときに、ナビが非表示のままなのを、表示させたい」ということを伝えたかったのですが、言葉足らずですいませんでした。回答によりうまく実装できました。ご覧に頂きありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

ハンバーガーメニューをクリックしてナビを表示させた後、×ボタンをクリックしてナビを非表示にしてから、ウィンドウサイスを広げたときに、ナビが非表示のままなのを、表示させたいということでしょうか。

jQueryのmatchMediaを使ってウィンドウリサイズ時に表示/非表示を切り替えればどうでしょう。

js
1const mediaQuery = window.matchMedia("(max-width: 1080px)")
2// ウィンドウサイズを変更したら実行（ブレイクポイントの監視）
3mediaQuery.addListener(handle);
4function handle(mm) {
5  if (mm.matches) {
6    $('.hamburger').removeClass('is-active');
7    $('.header__nav').hide();
8  } else {
9    $('.hamburger').removeClass('is-active');
10    $('.header__nav').show();
11  }
12}
13