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

実現したいこと

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

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

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

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

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

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