レスポンシブ練習。バーガーメニューjs効かない。

###

portfolio作成しながらレスポンシブの壁で詰まってます；

ブレイクポイントでheader内のメニューのon offに合わせ、バーガーメニューへの切り替えがうまく行きません。

実現したいこと

ブレイクポイントでの切り替え時に、メニューがまともに表示できるようにコーディンしたい。

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

①768px時からメニューが崩れる。
②バーガーメニューをクリックすると「X」になって
右側にサイドバーが現れるはずが出ない。
…出ないのか見えないのか。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-06/2db110ff-2da9-43ca-85a4-42bbc1d5a3c6.jpeg)
③jsが効かない？

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="style.css">
8  <link rel="stylesheet" href="responsive.css">
9  <title>Complete Responsive Website Design</title>
10</head>
11<body>
12 
13  <header>
14    <a href="#" class="logo">Food<span>.</span>v</a>
15    <ul class="navigation">
16      <li><a href="#banner">Home</a></li>
17      <li><a href="#about">About</a></li>
18      <li><a href="#menu">Menu</a></li>
19      <li><a href="#expert">Expert</a></li>
20      <li><a href="#testimonials">Testimonials</a></li>
21      <li><a href="#contact">Contact</a></li>
22
23    </ul>
24
25    <div class="burger">
26      <div class="line1"></div>
27      <div class="line2"></div>
28      <div class="line3"></div>
29    </div>
30  </header>
31
32  
33
34  
35  <section class="contact" id="contact">
36    <div class="title">
37      <h2 class="titleText"><span>C</span>contact Us</h2>
38      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
39    </div>
40    <div class="contactForm">
41      <h3>Send Message</h3>
42
43      <div class="inputBox">
44        <input type="text" placeholder="Name">
45      </div>
46      <div class="inputBox">
47        <input type="text" placeholder="Email">
48      </div>
49      <div class="inputBox">
50        <textarea placeholder="Name"></textarea>
51      </div>
52      <div class="inputBox">
53        <input type="submit" value="Send">
54      </div>
55      
56
57    </div>
58  </section>
59
60  <div class="copyrightText">
61    <p>Copyright 2021 <a href="#">Online Tutorials</a>.All right Reserved</p>
62  </div>
63
64  <script type="text/javascript">
65    window.addEventListener('scroll', function(){ const header =  document.querySelector('header');
66  header.classList.toggle("sticky", window.scrollY > 0);});
67  </script>
68  <script src="script.js"></script>
69</body>
70</html>

style.css
1@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
2
3*
4{
5  margin: 0;
6  padding: 0;
7  box-sizing: border-box;
8  font-family:  'Poppins', sans-serif;
9  scroll-behavior: smooth;
10}
11
12p
13{
14  font-weight: 300;
15  color: #111;
16}
17
18/* body
19{
20  min-height: 1000px;
21} */
22
23.banner
24{
25  position: relative;
26  width: 100%;
27  min-height: 100vh;
28  display: flex;
29  justify-content: center;
30  align-items: center;
31  /* background-image: url("0.jpg"); */
32  background-color: rgb(212, 205, 107);
33
34  background-size: cover;
35}
36
37.banner .content
38{
39  max-width: 900px;
40  text-align: center;
41}
42
43.banner .content h2
44{
45  font-size: 4em;
46  color: #fff;
47}
48
49.banner .content p
50{
51  font-size: 1em;
52  /* color: #fff; */
53}
54
55.btn
56{
57  font-size: 1em;
58  color:#fff;
59  background: #ff0157;
60  display: inline-block;
61  padding: 10px 30px;
62  margin-top: 20px;
63  text-transform: uppercase;
64  text-decoration: none;
65  letter-spacing: 2px;
66  transition: 0.5s;
67}
68
69.btn:hover
70{
71  letter-spacing: 6px;
72}
73
74header
75{
76  position: fixed;
77  top: 0;
78  left: 0;
79  width: 100%;
80  padding: 40px 100px;
81  z-index: 10000;
82  display: flex;
83  justify-content: space-between;
84  align-items: center;
85  transition: 0.5s;
86}
87
88header.sticky
89{
90  background: #fff;
91  padding: 10px 100px;
92  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
93}
94
95header .logo
96{
97  color:#fff;
98  font-weight: 700;
99  font-size: 2em;
100  text-decoration: none;
101}
102
103header.sticky .logo
104{
105  color: #111;
106}
107
108header .logo span
109{
110  color: #ff0157;
111}
112
113header .navigation
114{
115  position: relative;
116  display: flex;
117  /* background-color: pink; */
118  justify-content: space-around;
119}
120
121header .navigation li
122{
123  list-style: none;
124  margin-left: 30px;
125}
126
127header .navigation li a
128{
129  text-decoration: none;
130  color:#fff;
131  font-weight: 300;
132}
133
134header.sticky .navigation li a
135{
136  color: #111;
137}
138
139header .navigation li a:hover
140{
141  color: #ff0157;
142}
143
144section
145{
146  padding: 100px;
147}
148
149.row
150{
151  position:  relative;
152  width: 100%;
153  display: flex;
154  justify-content: space-between;
155
156}
157
158.row .col50
159{
160  position: relative;
161  width: 48%;
162}
163
164.titleText
165{
166  color: #111;
167  font-size: 2em;
168  font-weight: 300;
169}
170
171.titleText span
172{
173  color: #ff0157;
174  font-weight: 700;
175  font-size: 1.5em;
176}
177
178.row .col50 .imgBx
179{
180position: relative;
181width: 100%;
182/* min-height: 300px; */
183height: 100%;
184}
185
186.row .col50 .imgBx img
187{
188  position: absolute;
189  top: 0;
190  left: 0;
191  width: 100%;
192  height: 100%;
193  object-fit: cover;
194}
195
196.title
197{
198  width: 100%;
199  display: flex;
200  justify-content: center;
201  align-items: center;
202  flex-direction: column;
203}
204
205.menu .content
206{
207  display: flex;
208  justify-content: center;
209  flex-direction: row-reverse;
210  flex-wrap: wrap;
211  margin-top: 40px;
212}
213
214.menu .content .box
215{
216  width: 340px;
217  margin: 20px;
218  border: 15px solid #fff;
219  box-shadow: 0 5px 35px rgba(0,0,0,0.08);
220}
221
222.menu .content .box .imgBx
223{
224  position: relative;
225  width: 100%;
226  height: 300px;
227}
228
229.menu .content .box .imgBx img
230{
231  position: absolute;
232  top: 0;
233  left: 0;
234  width: 100%;
235  height: 100%;
236  object-fit: cover; 
237}
238
239.menu .content .box .text
240{
241  padding: 15px 0 5px;
242}
243
244.menu .content .box .text h3
245{
246  font-weight: 400;
247  color: #111;
248}
249
250.expert .content
251{
252  display: flex; 
253  justify-content: center;
254  flex-wrap: wrap;
255  flex-direction: row;
256  margin-top: 40px;
257}
258
259.expert .content .box
260{
261  width: 250px;
262  margin: 15px;
263}
264
265.expert .content .box .imgBx
266{
267  position: relative; 
268  width: 100%;
269  height: 300px;
270}
271
272.expert .content .box .imgBx img
273{
274  position: absolute; 
275  top: 0;
276  left: 0;
277  width: 100%;
278  height: 100%;
279  object-fit: cover;
280}
281
282.expert .content .box .text
283{
284  padding: 15px 0 5px;
285}
286
287.expert .content .box .text h3
288{
289  font-weight: 400;
290  color: #111;
291}
292
293.testimonials
294{
295  background: url(co01.jpg);
296  background-size: cover; 
297}
298
299.white .titleText,
300.white p
301{
302  color: #fff; 
303}
304
305.testimonials .content
306{
307  display: flex; 
308  justify-content: center; 
309  flex-wrap: wrap; 
310  flex-direction: row;
311  margin-top: 40px;
312}
313
314.testimonials .content .box
315{
316  width: 340px;
317  margin: 20px;
318  padding: 40px;
319  background: #fff;
320  display: flex; 
321  justify-content: center; 
322  align-items: center;
323  flex-direction: column; 
324}
325
326.testimonials .content .box .imgBx
327{
328  position: relative; 
329  width: 80px;
330  height: 80px;
331  margin-bottom: 20px;
332  border-radius: 50%;
333  overflow: hidden; 
334}
335
336.testimonials .content .box .imgBx img
337{
338  position: absolute; 
339  top: 0;
340  left: 0;
341  width: 100%;
342  height: 100%;
343  object-fit: cover;
344}
345
346.testimonials .content .box .text
347{
348  text-align: center; 
349}
350
351.testimonials .content .box .text p
352{
353  color: #666;
354  font-style: italic; 
355}
356
357.testimonials .content .box .text h3
358{
359  margin-top: 20px;
360  color: #111;
361  font-size: 1em;
362  color: #ff0157;
363  font-weight: 600;
364}
365
366.contact
367{
368  background: url(img15.jpg);
369  background-size: cover; 
370}
371
372.contactForm
373{
374  position: relative;
375  left: -50px;
376  padding: 75px 50px;
377  background: #fff; 
378  box-shadow: 0 15px 50px rgba(0,0,0,0.1);
379  max-width: 500px;
380  margin-top: 50px;
381}
382
383.contactForm h3
384{
385  color: #111;
386  font-size: 1.2em;
387  margin-bottom: 20px;
388  font-weight: 500;
389}
390
391.contactForm .inputBox
392{
393  position: relative; 
394  width: 100%;
395  margin-bottom: 20px;
396}
397
398.contactForm .inputBox input,
399.contactForm .inputBox textarea
400{
401  width: 100%;
402  border: 1px sold #555;
403  padding: 10px;
404  color: #111;
405  outline: none;
406  font-size: 16px;
407  font-weight: 300;
408  resize: none; 
409}
410
411.contactForm .inputBox input[type="submit"]
412{
413  font-size: 1em;
414  color: #fff; 
415  background: #ff0157;
416  display: inline-block;
417  text-transform: uppercase;
418  text-decoration: none; 
419  letter-spacing: 2px; 
420  transition: 0.5s;
421  max-width: 100px;
422  font-weight: 500;
423  border: none; 
424  cursor: pointer; 
425
426  box-shadow: 0 5px #970707;
427}
428
429.copyrightText
430{
431  padding: 8px 40px;
432  border-top: 1px solid rgba(0,0,0,0.1);
433  text-align: center; 
434}
435
436.copyrightText p
437{
438  color: #ff0157;
439  font-weight: 500;
440  text-decoration: none; 
441}
442
443.contactForm .inputBox input[type="submit"]:active
444{
445  box-shadow: none; 
446  position: relative; 
447  top: 5px;

responsive.css
1.burger{
2  cursor: pointer;
3  display: none;
4
5}
6 .burger div {
7  width: 25px;
8  height: 3px;
9  background-color: rgb(161, 12, 12);
10  margin: 5px;
11}
12
13.navigation-active {
14  transform: translateX(0%)!important;
15}
16
17@media screen and (max-width: 1024px) {
18.navigation {
19    width: 75%;
20  }
21}
22
23
24@media screen and (max-width: 768px) {
25  body {
26    overflow-x: hidden;
27  }
28    ul .navigation  {
29    position: absolute;
30    right: 0;
31    height: 92vh;
32    top: 8vh;
33    background-color: rgb(133, 133, 210);
34    flex-direction: column;
35    align-items: center;
36    width: 50%;
37    transform: translateX(100%);
38  }
39    ul .navigation a {
40    color: rgb(232, 209, 209);
41  }
42
43  .burger {
44    display: block;
45  }
46
47  .navigation li {
48    opacity: 0;
49  }
50}

script.js
1const burger = document.querySelector(".burger")
2const navigation = document.querySelector(".navigation")
3
4burger.addEventListener("click", () =>  {
5    navigation.classList.toggle("navigation-active");
6});

試したこと

おそらく　responsive.css内のコード間違いかjs

初学者なので見にくいコードですいません。
※文字数がオーバーするのでhtmlの中身は一部削除して載せさせていただいてます。
cssの部分は削らずそのままです。

ご指摘よろしくよ願いいたします。

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

回答1件

ベストアンサー

JSは正常に動作してますね。ハンバーガーメニューをクリックする毎にnavigation-activeクラスが付け外しされてます。

①768px時からメニューが崩れる。

右側にサイドバーが現れるはずが出ない。

上記の原因は、CSSのセレクターが間違っているので設定が反映されてないからですね。
ul .navigationというように半角空白を入れると、ulの子孫要素の.navigationという意味になりますがそのような要素は存在してないです。

responsive.css内のセレクターを下記のように修正すればサイドバー(ul.navigation)が表示されます。

CSS/responsive.css
1    ul.navigation  { /* 修正 */
2    position: absolute;
3    right: 0;
4    height: 92vh;
5    top: 8vh;
6    background-color: rgb(133, 133, 210);
7    flex-direction: column;
8    align-items: center;
9    width: 50%;
10    transform: translateX(100%);
11  }
12  header.sticky ul.navigation li a { /* 修正 */
13    color: rgb(232, 209, 209);
14  }

②バーガーメニューをクリックすると「X」になって

これはそのようなCSSの設定がどこにもないのでそうなるはずもありません。
例えば、下記のようなCSSを追加すれば「X」に変化します。

css
1.navigation + .burger > div {
2  transition: 0.5s;
3}
4.navigation-active + .burger > .line2 {
5  opacity: 0;
6}
7.navigation-active + .burger > .line1 {
8  transform: translatey(8px) rotate(45deg);
9}
10.navigation-active + .burger > .line3 {
11  transform:  translatey(-8px) rotate(-45deg);
12}

上記以外にも気になるところを修正したサンプルを置いておきますので、元のコードの違いを調べて研究してみてください。

CSS JavaScript ハンバーガーメニューサンプル

投稿2022/11/07 02:37

hatena19

総合スコア33699

titivo

2022/11/07 13:46

素晴らしいです！　おっしゃるとおり動きました！　細かな修正部分は複数あるようでしたが、要は、ul 　つけるつけない？　の基本的な部分が弱いと感じました；修正サンプルまでいただきましてほんとうにありがというございました！おっしゃるとおりこれを基に今週は何度も眺め研究し、身につけていこうと思ってます。ご丁寧にお時間いただきましてありがとうございました。今後とも懲りずにお会いできればとても幸せに思います。　頑張ります！

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