ハンバーガーメニューについて

レスポンシブデザインのハンバーガーメニューが開いたときに、Awsome Catch緑色の文字を黒に表示させようとしています。
classListを使っていますが上手く表示できません。

これまでの経緯。

レスポンシブデザインのハンバーガメニューの作成にあたって具体的トラブル箇所です。

HTML（コメント/Awsome Catch以下）では、id='catch_1"としています。

CSS（コメント/Awsome Catch以下)では、通常では、　#catch_1　h1 でAwsome Catchの文字色は緑色としています。
そして、classListを使用して、

メニューバーが開いたときに、#catche_1を class="catch_1"として、文字を黒に表示させようとしました。

そのため、

JavaScriptでは、var catch_1 = document.getElementById('catch_1');
として、id=catch_1を　　var catch_1としました。

そして、nav.addEventListener('click', function () {
catch_1.classList.toggle('catch_2');
});
として、classListを使って、id="chatch_1"をclass="catche_2"に変更させています。
予定では、CSSの　 .catch_2　h1　で文字色が黒になると想定していましたが、変化がありません。

addEventListenerのコード作成で、下記に問題があるかと検討つけていますが、対応しかねています。
var nav = document.getElementById('nav-wrapper');
var hamburger = document.getElementById('js-hamburger');

ご教示いただければ幸いです。

HTMLここに言語を入力

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css">  <script src="main.js"></script> <title>MENTA</title> </head> <body> <div class="mainvisual" style="font-family: 'Montserrat'"> <header> <div class="header_logo"> <h3>LogoLOGO</h3> <p>コスメです。</p> </div>

       <div id="nav-wrapper" class="nav-wrapper">
        <div id="js-hamburger" class="hamburger">
            <span class="hamburger__line hamburger__line--1"></span>
            <span class="hamburger__line hamburger__line--2"></span>
            <span class="hamburger__line hamburger__line--3"></span>
            <nav class="sp-nav">
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="Staff.html">Staff</a></li>
                    <li><a href="Menu.html">Menu</a></li>
                    <li><a href="Blog.html">Blog</a></li>
                    <li><a href="Access.html">Access</a></li>
                </ul>
            </nav
        </div>

    
        </div>
    </header>
　　　　　　　　　　　　   <!------------> Awsome Catch ---------- -->
    <div class="catch">
        <div id="catch_1" >
            <h1>Awesome<br>
                Cosmetic</h1>
            </div>
            <!-- <p class="visivle_2" style="font-family: '游ゴシック体';">コスメのセレクトショップのサイトです。</p>
                <p class="visible_2" style="font-family: '游ゴシック体';">コスメのセレクトショップのサイトです。</p> -->
    </div>
 
</div>

    
</body>
</html>

CSS
1* {
2    box-sizing: border-box;
3    font-family: "游ゴシック体";
4   font-family: 'Montserrat'; 
5    margin:0;
6
7}
8
9
10header {
11    
12    margin:0 auto;  
13    background-image: url("img/karly-jones-9RgvK_0bntg-unsplash.png");
14    background-size:cover;
15    height:970px;
16    color:white;
17    display: flex;   
18    position: relative;
19    background-color: #cd5c5c;
20}
21
22
23@media screen and (max-width: 600px) {
24
25    header {
26    background-image: url("img/skitch.png");    
27    /* height:750px;  */
28    overflow:hidden;
29    width:414px;
30    height:736px;
31  }
32}   
33
34
35@media screen and (max-width: 320px) {
36   
37    header {
38    background-image: url("img/skitch.png");    
39    overflow:hidden;
40    width:320px;
41    height: 600px;      
42  }
43}   
44
45/*　ーーーーーーーーーーーーーーーーーー ヘッダーメニュー　ーーーーーーーーーーーーーーーー */
46
47
48/* -------------------------------- Awsome Catch ------------------------------*/
49
50.catch h1 {
51    position: absolute;
52    top:373px;
53    left:139px;
54    color:white;
55    font-size:64px;
56    line-height: 1.2;
57    font-weight: bold;
58    z-index: 3;
59}
60
61
62@media screen and (max-width: 600px) {
63
64    #catch_1 h1 {
65        font-size:40px;
66        top:179px;
67        left:18px;
68        color:green;    
69        z-index: 3;
70    }
71} 
72
73@media screen and (max-width: 600px) {
74
75    .catch_2 h1{
76        font-size:40px;
77        top:179px;
78        left:18px;
79        color:black;
80        z-index: 3;
81    }
82}
83
84
85/* ----------------------------Awsome Catch 終了 -------------------------*/
86
87
88.sp-nav {
89    color:white;
90}
91
92.sp-nav .a:hover {
93  border-bottom:1px solid white;
94}
95
96.sp-nav .a:hover {
97text-decoration: none;
98}
99
100
101/* ---------------------------- main  -------------------------*/
102
103
104main {
105    width:1004px;
106    margin: 0 auto;
107    position: relative;
108}
109
110
111@media screen and (max-width: 600px) {
112main {    
113    width:414px;
114}
115}
116
117
118.font {
119    font-weight: bold;
120    font-size: 24px;   
121}
122
123/* アンダーライン */
124.under_line {
125    position: relative;
126    font-size: 48px;
127    font-weight: bold;
128    text-decoration: none;
129    padding-bottom: 15px;
130} 
131
132
133@media screen and (max-width: 600px) {
134.under_line {
135    padding-bottom: 12px;
136}
137}
138
139/* 疑似要素 */
140.under_line:after {
141   position: absolute;
142   content:''; 
143   left:0px;
144   display:block; 
145   width:69px;
146   height: 4px;
147   background-color: black ; 
148   margin-top: 16px;
149    
150}
151
152
153/* ----------------------------ハンバーガー メニュー -------------------------*/
154
155
156@media screen and (max-width: 600px) {
157
158    .hamburger {
159        position:absolute;
160        right: 10px;
161        top: 20px;
162        width: 50px;
163        height: 40px;
164        cursor: pointer;        
165        z-index: 100;
166    }
167    
168    /* ライン一つのサイズ */
169    .hamburger__line {
170        position: absolute;
171        width: 50px;
172        height: 3px;
173        right: 15px;
174        background-color: #000;
175        transition: all 0.5s;
176    /* 　　z-index:300; */
177
178    }
179    
180    .hamburger__line--1 {
181        top: 1px;
182    }
183    
184    .hamburger__line--2 {
185        top: 18px;
186    }
187    
188    .hamburger__line--3 {
189        top: 36px;
190    }
191    
192    
193    .open .hamburger__line--1 {
194        transform: rotate(-45deg);
195        top: 11px;
196    }
197    
198    .open .hamburger__line--2 {
199        opacity: 0;       
200    }
201    
202    .open .hamburger__line--3 {
203        transform: rotate(45deg);
204        top: 11px;
205     
206    }
207    
208
209/* ----------------------------sp-sp-nav(ナビ) -------------------------*/
210    .sp-nav {
211        position: fixed;
212        right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
213        top: 0;
214        width: 70%; /* 出てくるスライドメニューの幅 */
215        height: 100vw;
216        background-color: #fff;
217        transition: all 0.5s;
218        z-index: 200;
219        opacity: 0.9;
220        overflow-y: auto; 
221    }
222 
223    
224 /* ----------------------------ハンバーガーがクリックされたら右からスライド　------------------*/
225    .open .sp-nav {    
226        right: 0;
227        height: 730px;
228    }
229}
230    
231

Javascript
1window.onload = function () {
2    // ナビゲーションバー
3    var nav = document.getElementById('nav-wrapper');
4    var hamburger = document.getElementById('js-hamburger');
5    var catch_1 = document.getElementById('catch_1');
6   
7    hamburger.addEventListener('click', function () {
8        nav.classList.toggle('open');  
9    });
10
11    nav.addEventListener('click', function () {
12        catch_1.classList.toggle('catch_2');  
13    });
14      
15};

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

回答1件

ベストアンサー

ハンバーガーメニューが開いたときに、バツ印の部分をクッキリと黒色で表示

ドロワーの下に入っていますので、z-indexで調整するのがいいと思います。

緑色の文字を黒に表示させたいのですが。

詳細度の問題です。
IDセレクタはあまり使用しない方がいいです。セレクタを見直してはいかがですか。

こんな感じでしょうか。

css
1@media screen and (max-width: 600px) {
2
3    /* .catch_2 h1{ */
4    #catch_1.catch_2 h1{
5
6/* ... */
7
8        /* z-index: 200; */
9        z-index: -1;

投稿2021/10/29 06:35

Lhankor_Mhy

総合スコア36074

tohma

2021/10/30 01:51

返事が遅れまして申し訳ありません。ドロワーの下に入っていますので、z-indexで調整するのがいいと思います。ご指摘の通りで、無事に解決しました。詳細度の問題です。 IDセレクタはあまり使用しない方がいいです。セレクタを見直してはいかがですか。 getElementByIdをgetElementsByClassNameにしたところ、無事にクラスを付け替えることができました。当方、詳細度については知りませんでした。ご教示いただきまして、ありがとうございます

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