質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

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

titivo
titivo

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

280閲覧

投稿2022/11/06 09:05

編集2022/11/06 09:08

イメージ説明###

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の部分は削らずそのままです。

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

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

総合スコア32038

titivo❤️を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

titivo

2022/11/07 13:46

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。