スマホ版ハンバーガーメニューがフェードインにならない

前提・実現したいこと

こんにちは。
ハンバーガーメニューの実装がうまくいかず、
とても困っているので、お力を貸していただけますと幸いです。

よろしくお願いいたします。

発生している問題

display:noneで隠しているメニューをフェードインする形でフワッと表示・非表示をしたい。
しかし、jQueryが思ったように反応しない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title></title>
7    <link rel="stylesheet" href="css/style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9    <script src="js/main.js"></script>
10    <meta name="viewport" content="width=device-width,initial-scale=1">
11  </head>
12
13  <body>
14    <header id="header">
15      <div class="sp_menu sp">
16        <div class="logo">
17          <a href="index.html">
18            <img src="img/logo.svg" width="100%" alt="ロゴ">
19          </a>
20        </div>
21        <div class="hamburger">
22          <span></span>
23          <span></span>
24          <span></span>
25        </div>
26      </div>
27      <ul class="sp_nav sp">
28        <li><a href="#service">SERVICE</a></li>
29        <li><a href="#contents">CONTENTS</a></li>
30        <li><a href="#plan">PLAN</a></li>
31        <li><a href="#point">POINT</a></li>
32        <li><a href="#director">DIRECTOR</a></li>
33        <li><a href="#quality">QUALITY</a></li>
34        <li><a href="#faq">FAQ</a></li>
35        <li><a href="#contact">CONTACT</a></li>
36        <li><a href="#company">COMPANY</a></li>
37      </ul>
38    </header>

css
1@media screen and (max-width: 750px) {
2
3  .sp_menu {
4    padding: 5.8vw 6.6vw 5.5vw;
5    display: flex;
6    justify-content: space-between;
7    align-items: center;
8    border-bottom: 2px solid #BF1920;
9  }
10
11  .sp_menu .logo {
12    width: 10.5vw;
13  }
14
15  .sp_nav {
16    text-align: center;
17    padding-top: 15vw;
18    height:100%;
19    position: absolute;
20    top: 0;
21    right: 0;
22    width: 100vw;
23    z-index: 1;
24    background-color: #E65345;
25    padding-top: 33vw;
26    display:none;
27  }
28
29  .show {
30    display:block;
31  }
32
33  .sp_nav li {
34    margin-bottom: 7.5vw;
35  }
36
37
38  .sp_nav a {
39    color:#fff;
40    font-family: 'NeuzeitSLTStd-BookHeavy';
41    font-size: 4.6vw;
42  }
43
44  .hamburger {
45    cursor: pointer;
46  }
47  
48  .hamburger,
49  .hamburger span {
50    display: inline-block;
51    transition: all .4s;
52    box-sizing: border-box;
53  }
54
55  .hamburger {
56    position: relative;
57    width: 9vw;
58    height:7vw;
59    z-index: 2;
60  }
61  
62  .hamburger span {
63    position: absolute;
64    left: 0;
65    width: 100%;
66    height: 3px;
67    background-color: #BF1920;
68    border-radius: 4px;
69  }
70  
71  .hamburger span:nth-of-type(1) {
72    top: 0;
73  }
74  .hamburger span:nth-of-type(2) {
75    top: 47%;
76  }
77  .hamburger span:nth-of-type(3) {
78    bottom: 0;
79  }
80  
81}

jQuery
1 $('.hamburger').on('click', function () {
2    $('.hamburger').toggleClass('active');
3    $('.sp_nav').toggleClass('show',500);
4  });

試したこと

opacityで隠して表示する
→ファーストビューには他のjQueryの実装があり、
opacityにしても実質メニューがその上に重なってしまい、
重なってしまったjQuery機能しなくなるため断念

visuality:hiddeにして隠し、visualで表示する
→フェードインにならない+反応が遅い

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

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

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

回答1件

ベストアンサー

display では none と block の２つの状態しかないのでアニメーションは無理。
visuality も hidden と visual なので同様。

アニメーションにするは、opacity を使うことになります。

opacityにしても実質メニューがその上に重なってしまい、

重なってしまったjQuery機能しなくなるため断念

これに関しては、z-index: -1; で背後に移動させればいいでしょう。

CSS
1  .sp_nav {
2    text-align: center;
3    padding-top: 15vw;
4    height:100%;
5    position: absolute;
6    top: 0;
7    right: 0;
8    width: 100vw;
9    z-index: -1; /* 修正 */
10    background-color: #E65345;
11    padding-top: 33vw;
12    transition: all .5s; /* 追加 */
13    opacity:0; /* 追加 */
14  }
15
16  .show {
17    opacity:1; /* 追加 */
18    z-index: 1;/* 追加 */
19  }

よく考えたらjQueryを使うなら、fadeToggle を使えばいいですね。

jQuery 要素をフェードイン/フェードアウトするサンプル(fadeToggle) | ITSakura

CSSは現状の z-index: 1; display: none; でOK。
.showセレクタの設定も不要です。

js
1 $('.hamburger').on('click', function () {
2    $('.hamburger').toggleClass('active');
3    $('.sp_nav').fadeToggle(500);
4  });

投稿2020/04/06 06:55

編集2020/04/06 07:43

hatena19

総合スコア33788

HiroK59

2020/04/06 07:44

ご回答いただきありがとうございます。 1つめの回答ですと、ファーストビューにある画像が一瞬上に重なってしまいました。 2つめの回答ですと、挙動が逆でしたら実装可能でした。 (ページを開いたらメニューが開いている状態。ボタンと名ニューの開閉が逆になる) 2つも提案いただきありがとうございます。もう少し解決策を待ってみます。

HiroK59

2020/04/06 07:46

追加でいただいたコードで書いたらできました！助かりました。本当にありがとうございます。

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