大画面から小画面に画面サイズを切り替えるときに、表示されたくないものが一瞬だけ表示されてしまう。

大画面（768px以上）のときは最初からヘッダーにナビゲーションメニューを表示させているのですが、小画面（767px以下）のときは、ヘッダーボタンをクリックすることでナビゲーションメニューが右からあらわれるというサイトを作っています。

しかしヘッダーボタンをクリックしたときだけでなく、大画面から小画面に画面サイズを切り替えるときに、一瞬、画面右側にナビゲーションメニューの一部（黒い背景部分）が表示されてしまいます。

私としてはナビゲーションメニューは、小画面のときは画面右側（の見えないところ）に、大画面のときは画面上部のヘッダー内に表示されるというような完全な切り替えを望んでいるのですが、どのように修正すればよいでしょうか？

HTMLとCSSは次の通りです（問題箇所を見やすくするため、transitionは30秒に設定しています）。
よろしくお願いします。

HTML
1<body>
2    <!-- header -->
3    <header class="header">
4        <div class="header__inner">
5            <h2 class="header-ttl">タイトル</h2>
6            <nav class="header-nav">
7                <ul class="header-nav__ul">
8                    <li class="header-nav__li"><a href="">Company</a></li>
9                    <li class="header-nav__li"><a href="">Service</a></li>
10                    <li class="header-nav__li"><a href="">News</a></li>
11                    <li class="header-nav__li"><a href="">Contact</a></li>
12                </ul>
13            </nav>
14            <button class="header-btn" type="button" onClick="navFunc()">ヘッダーボタン</button>
15        </div>
16    </header>
17
18    <!-- main -->
19    <div class="main"></div>
20
21    <script>
22        function navFunc() {
23            document.querySelector('html').classList.toggle('open');
24        }
25    </script>
26</body>

CSS
1/* html,bodyの設定 */
2html, body {
3    overflow-x: hidden;
4}
5
6/* bodyの設定 */
7body {
8  margin: 0;
9}
10
11/* headerの設定 */
12.header {
13  position: relative;
14  background-color: #000;
15  color: #fff;
16}
17
18.header__inner {
19  height: 75px;
20  display: flex;
21  align-items: center;
22  justify-content: space-between;
23}
24
25.header-nav {
26  background-color: #000;
27  position: absolute;
28  top: 0;
29  left: 100%;
30  width: 100%;
31  height: 100vh;
32  overflow-x: hidden;
33  transition: left 30s;
34}
35
36.open .header-nav {
37  left: 0;
38}
39
40.header-btn {
41    z-index: 100;
42}
43
44@media (min-width: 768px) {
45
46  .header-nav {
47    position: static;
48    left: 0;
49    width: auto;
50    height: 100%;
51  }
52
53  .header-nav__ul {
54    display: flex;
55    align-items: center;
56  }
57
58　.header-btn {
59      display: none;
60  }
61}
62
63/* mainの設定 */
64.main {
65  height: 1000px;
66}

（追記）
768px以上のときの設定に
.header-btn {
display: none;
}
を追加しました。

（追記2）
ディベロッパーツールを表示し、画面サイズを切り替えると不具合が出たので、以下の設定を追加しました。
/* html,bodyの設定 */
html, body {
overflow-x: hidden;
}

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

回答2件

ベストアンサー

直接的な回避法はないので、transformなど別のプロパティの組み合わせるしかないと思います。

css
1.header-nav {
2  /* ... */
3  transition: transform 30s;
4}
5
6.open .header-nav {
7  transform: translateX(-100%);
8}

投稿2021/07/24 07:04

Lhankor_Mhy

総合スコア36960

cheshire-cat

2021/07/24 07:40

ありがとうございます。 transformには気づきませんでした。きちんと動きました。

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

画面を小さくしたときの状態であればこれでいいような気がしますが・・・
（動きとしてはまだ気になるところが残ります）

css
1  .header-nav {
2    background-color: #000;
3    position: absolute;
4    top: 0;
5    left: 100%;
6    width: 0%; /*＜＝100%を0%に */
7    height: 100vh;
8    overflow-x: hidden;
9    transition: left 1s;/*秒数長かったので1秒に変更しました */
10  }
11  
12  .open .header-nav {
13    left: 0;
14    width: 100%; /*追加しました */
15  }

投稿2021/07/24 06:54

編集2021/07/24 06:55

nonoshu

総合スコア973

cheshire-cat

2021/07/24 07:12

お返事ありがとうございます。たしかにこの設定で、大画面から小画面への不具合がなくなりました。ただ、せっかく回答くださったのに申し訳ありませんが、わたしもこの設定の動きは気になります。わたしとしてはボタンをクリックしたときに、メニュー画面が左右に移動するところが気に入っています。そのためメニューが開いた状態でクリックしたときに、メニューがぱっと消えてしまうというのはあまり好みではないのです。ですが不具合を解消する手段のひとつとしては参考になりました。ありがとうございます。

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

あなたの回答