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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

受付中

javascriptでハンバーガーメニューを展開し、展開時に背景を暗くしたい。

puff
puff

総合スコア0

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0回答

0グッド

1クリップ

298閲覧

投稿2023/02/03 21:53

編集2023/02/04 18:58

実現したいこと

javascriptでハンバーガーメニューを展開し、展開時に背景を暗くしたい。
javascriptで初めてハンバーガーメニューを作ります。
ハンバーガーメニューを展開時に、背景を暗くしたいのですが、暗くなりません。
検証で見てみると、クリック時にクラス hambergeの横にactionが出現しません。※画像参照イメージ説明
初心者すぎて何を検索したらよいのかもわかりません。
分かる方いらっしゃいましたら、ぜひご教授願います。

html

1<div class="hamberger"> 2<header class="header"> 3</header> 4 <!-- ハンバーガーメニュー --> 5 <div class="btn"> 6 <i></i> 7 <i></i> 8 <i></i> 9 </div> 10<div class="gnav"> 11</div> 12<div class="gnav-background"> 13</div> 14<main></main> 15</div>

css

1/* ハンバーガーメニュー */ 2.gnav { 3 position:fixed; 4 top:0; 5 bottom:0; 6 left:20%; 7 right:0; 8 background-color: #f0f0f0; 9 color:#000000; 10 z-index:10; 11 opacity: 0; 12 pointer-events: none; 13 transition: 0.5s; 14} 15 16.gnav.active { 17opacity: 1; 18pointer-events: auto; 19} 20 21.hamberger.active { 22 background: rgba(3,3,3,0.5); 23} 24

javascript

1'use strict'; 2 3{ 4 const btn = document.querySelector('.btn'); 5 const gnav = document.querySelector('.gnav'); 6 const hamberger = document.querySelector('.hamberger'); 7 8 btn.addEventListener('click', () => { 9 btn.classList.toggle('active'); 10 gnav.classList.toggle('active'); 11 hamberger.classList.toggle('active'); 12 }); 13}

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

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

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

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

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

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

Cocode

2023/02/03 22:27

初めての質問おめでとうございます! さてさて、コードはスクリーンショットではなく、本文に実際に記載して含めるようにしてください。 その際、コードブロックの中にコードを書くようにしてください。 例1) ```html (ここにHTMLのコードを書く) ``` 例2) ```javascript (ここにJavaScriptやjQueryのコードを書く) ``` こうすることで、コードとして整形され見やすくなります。 そうすると回答がつきやすくなります。 質問は編集できますので、「編集」をクリックして修正をお願いします。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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