jQuery ハンバーガーメニューの実装

前提・実現したいこと

ハンバーガーメニューのアイコンをクリックしたとき→上の線と下の線で×を作る

ここに質問の内容を詳しく書いてください。
ハンバーガーメニューのアイコンをクリックしたときに、3本線からバツ印を作る方法を教えてください。

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

エラーメッセージ

該当のソースコード

html
1<header class="header">
2        <h1 class="header-ttl"><a href="index.html">My Work</a></h1>
3        <nav class="header-nav" id="nav">
4          <ul class="header-list">
5            <li class="header-item">
6              <a href="" class="header-link">About</a>
7            </li>
8            <li class="header-item">
9              <a href="" class="header-link">Works</a>
10            </li>
11            <li class="header-item"><a href="" class="header-link">News</a></li>
12            <li class="header-item">
13              <a href="" class="header-link">Contact</a>
14            </li>
15            <li class="header-item">
16              <a href="" class="header-link"
17                ><img src="img/icon-instagram.png" alt="" class="instagram-img"
18              /></a>
19            </li>
20          </ul>
21        </nav>
22        <!-- ハンバーガーメニュー -->
23        <div class="hamburger" id="hamburger">
24          <!-- １番上の線 -->
25          <span class="inner_line bar-top" id="line1"></span>
26          <!-- 真ん中の線 -->
27          <span class="inner_line bar-mid" id="line2"></span>
28          <!-- １番下の線 -->
29          <span class="inner_line bar-bot" id="line3"></span>
30        </div>
31      </header>

css
1/* header */
2.header {
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6}
7
8.header-ttl {
9  font-size: 30px;
10}
11
12.header-list {
13  display: flex;
14  justify-content: space-between;
15  align-items: center;
16}
17
18.header-item {
19  margin: 0 15px;
20  font-size: 16px;
21}
22
23.instagram-img {
24  width: 30px;
25}
26
27.active {
28  display: block;
29}
30
31@media (max-width: 480px) {
32  .header {
33    position: relative;
34  }
35
36  .header-nav {
37    display: none;
38    /* width: 200vw; */
39    /* height: 100vh; */
40    transform: translateX(100%);
41    transition: 0.5s;
42  }
43
44  .header-nav.slide-in {
45    transform: translateX(0);
46    display: block;
47    position: fixed;
48    text-align: center;
49    background: rgba(255, 255, 255, 0.9);
50    top: 0;
51    left: 0;
52    bottom: 0;
53    right: 0;
54  }
55
56  .header-list {
57    display: block;
58    position: absolute;
59    top: 50%;
60    left: 50%;
61    transform: translate(-50%, -50%);
62  }
63
64  .header-item {
65    margin-bottom: 20px;
66  }
67
68  .hamburger {
69    position: absolute;
70    right: 20px;
71    display: block;
72    width: 40px;
73    height: 50px;
74    cursor: pointer;
75    z-index: 999;
76  }
77
78  .inner_line {
79    display: block;
80    position: absolute;
81    right: 20px;
82    width: 40px;
83    height: 1px;
84    background: #333;
85    transition: 0.3s;
86  }
87
88  .bar-top {
89    top: 10px;
90  }
91
92  .bar-mid {
93    top: 50%;
94  }
95
96  .bar-bot {
97    bottom: 10px;
98  }
99
100  .hamburger.close .bar_top {
101    transform: rotate(45deg);
102    top: 20px;
103  }
104  .hamburger.close .bar_mid {
105    opacity: 0;
106  }
107  .hamburger.close .bar_bottom {
108    transform: rotate(-45deg);
109    top: 20px;
110  }
111}
112

jQuery
1$(function () {
2  $(".hamburger").click(function () {
3    $(".hamburger").toggleClass("close");
4    $(".header-nav").toggleClass("slide-in");
5  });
6});

試したこと

.hamburgerをクリックしたときに、jQueryでcloseクラスをつけてあげて、3本線それぞれにcloseがついた時のcssを指定しました。

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

</body>の直前にjQueryのCDNと自作のjsのファイルの記述はしています。

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

回答1件

ベストアンサー

HTMLのクラス名とCSSのセレクタが合致してません。

diff
1-  .hamburger.close .bar_top {
2+  .hamburger.close .bar-top {
3    transform: rotate(45deg);
4    top: 20px;
5  }
6-  .hamburger.close .bar_mid {
7+  .hamburger.close .bar-mid {
8    opacity: 0;
9  }
10-  .hamburger.close .bar_bottom {
11+  .hamburger.close .bar-bot {
12    transform: rotate(-45deg);
13    top: 20px;
14  }