画面幅変更時に要素が表示されるのを解決したい

実現したいこと

画面幅767pxまではハンバーガーボタンを押すとメニューが表示され、768px以上ではメニューが非表示になるようにしたい。

発生している問題・分からないこと

画面幅767pxと768pxの間でハンバーガーメニューが一瞬表示されてしまう。
768pxから767pxに下げたときにこの現象が見られる。767pxから768pxにしたときには再現出来なかった。

エラーメッセージ

error
1エラーメッセージは特になし

該当のソースコード

HTML
1<header class="header container">
2        <h1 class="header-logo"><a class="header-logo-link" href="#"><img src="images/header/header_logo.png" alt=""></a></h1>
3        <button type="button" class="hamburger-btn flex">
4          <span class="hamburger-btn-bar"></span>
5          <span class="hamburger-btn-bar"></span>
6          <span class="hamburger-btn-bar"></span>
7        </button>
8        <div class="hamburger-menu">
9          <nav class="hamburger-nav">
10            <ul class="hamburger-nav-list flex">
11              <li>コース案内</li>
12              <li>特色</li>
13              <li>講師紹介</li>
14              <li>料金プラン</li>
15              <li>よくあるご質問</li>
16            </ul>
17          </nav>
18          <a class="free-trial-btn">無料で体験する<i class="bi bi-arrow-right-short"></i></a>
19          <ul class="hamburger-sns flex">
20            <li class="instagram"><a href="#"><i class="bi bi-instagram"></i></a></li>
21            <li class="youtube"><a href="#"><i class="bi bi-youtube"></i></a></li>
22            <li class="facebook"><a href="#"><i class="bi bi-facebook"></i></a></li>
23            <li class="twitter"><a href="#"><i class="bi bi-twitter"></i></a></li>
24          </ul>
25        </div>
26    </header>
27

CSS
1.container {
2  overflow: hidden;
3}
4
5.flex {
6  display: flex;
7}
8
9.header {
10  position: fixed;
11  z-index: 100;
12  background-color: #0079f2;
13  width: 37.4rem;
14  height: 66px;
15  border-radius: 3.3rem;
16  display: flex;
17  align-items: center;
18  justify-content: space-between;
19  padding-left: 3.1rem;
20  padding-right: 3.2rem;
21  top: 8px;
22  margin-left: .8rem;
23  margin-right: .8rem;
24}
25
26@media screen and (min-width:768px) {
27  .header {
28    width: 99vw;
29    height: 80px;
30    border-radius: 4rem;
31    top: 16px;
32    padding-left: 3.9rem;
33    padding-right: 4.2rem;
34  }
35}
36
37h1.header-logo {
38  line-height: 0;
39  width: 160px;
40}
41
42@media screen and (min-width:768px) {
43  h1.header-logo {
44    width: 195px;
45  }
46}
47
48@media screen and (max-width:767px) {
49  .hamburger-menu {
50    width: 37.4rem;
51    height: 52.3rem;
52    background-color: #0079f2;
53    border-radius: 3.2rem;
54    opacity: 0;
55    visibility: hidden;
56    transition: all .6s;
57    position: fixed;
58    top: 9rem;
59    text-align: center;
60    left: .8rem;
61    right: .8rem;
62    padding: 4.6rem 4.8rem 4.7rem;
63  }
64}
65
66.hamburger-menu-active {
67  opacity: 1;
68  visibility: visible;
69}
70
71.hamburger-btn {
72  flex-direction: column;
73  gap: 5px;
74  z-index: 999;
75}
76
77@media screen and (min-width:768px) {
78  .hamburger-btn {
79    display: none;
80  }
81}
82
83.hamburger-btn-bar {
84  background-color: #fff;
85  width: 24px;
86  height: 2px;
87}
88
89@media screen and (max-width:767px) {
90  .hamburger-nav {
91    margin-bottom: 4rem;
92  }
93}
94
95@media screen and (min-width:768px) {
96  .hamburger-nav {
97    width: 49.2rem;
98  }
99}
100
101.hamburger-nav-list {
102  justify-content: space-between;
103}
104
105@media screen and (max-width:767px) {
106  .hamburger-nav-list {
107    flex-direction: column;
108    height: 24.8rem;
109  }
110}
111
112@media screen and (min-width:768px) {
113  .hamburger-nav-list {
114    padding-bottom: .3rem;
115  }
116}
117
118@media screen and (min-width:768px) {
119  .header .free-trial-btn {
120    display: none;
121  }
122}
123
124.hamburger-sns {
125  justify-content: space-between;
126  margin-top: 4.7rem;
127  margin-left: 1.25rem;
128  width: 25rem;
129}
130
131.hamburger-sns li a {
132  color: #fff;
133  font-size: 3.3rem;
134  line-height: 1;
135}
136
137@media screen and (min-width:768px) {
138  .hamburger-sns {
139    display: none;
140  }
141}
142

JavaScript
1var hamburger = $('.hamburger-menu');
2$('.hamburger-btn').on('click', function () {
3  console.log('click');
4  hamburger.toggleClass('hamburger-menu-active');
5});
6
7$(window).on('resize', function () {
8  console.log('resize');
9  hamburger.removeClass('hamburger-menu-active');
10});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

メディアクエリの画面幅の値を変更してみたのですが修正できませんでした。初歩的なところで躓いてしまいお恥ずかしいのですが、なにか解決策をご教授いただけますと幸いです。

補足

特になし

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

回答2件

そもそも修正の必要があるかどうかから検討の余地あり。
ウィンドウ幅を途中で変更する前提のシステムというのはあまり考えられません。
呼び出し時にウィンドウ幅は半ば確定しているのでサイズ変更というレアな処理をわざわざ入れるメリットがあるかよく検討されるとよいでしょう。

投稿2024/01/22 00:34

yambejp

総合スコア118035

A-679275289-jG

2024/01/22 04:25

ご回答いただきありがとうございます。確かに仰る通りですね。参考になりました。

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

ベストアンサー

レスポンシブ切り替え時にハンバーガーメニューが一瞬表示されてしまう原因は、
その時にメニューの表示/非表示を切り替えますが、
transition: all .6s;が有効なのでゆっくり非表示になるということでしょう。

CSSだけの設定で対処する方法が思いつかなかったので、表示/非表示の切り替えをjQueryで設定する方法を考えました。

CSS
1@media screen and (max-width:767px) {
2  .hamburger-menu {
3    width: 37.4rem;
4    height: 52.3rem;
5    background-color: #0079f2;
6    border-radius: 3.2rem;
7 /* ↓削除
8    opacity: 0;
9    visibility: hidden;
10    transition: all .6s; */
11    position: fixed;
12    top: 9rem;
13    text-align: center;
14    left: .8rem;
15    right: .8rem;
16    padding: 4.6rem 4.8rem 4.7rem;
17  }
18}
19 /* ↓削除
20.hamburger-menu-active {
21  opacity: 1;
22  visibility: visible;
23}
24*/

JavaScript/jQuery
1var hamburger = $(".hamburger-menu");
2$(".hamburger-btn").on("click", function () {
3  hamburger.fadeToggle(600);
4});
5$(window).resize(function () {
6  if (window.matchMedia("(max-width: 767px)").matches) {
7    hamburger.hide();
8  } else {
9    hamburger.show();
10  }
11});