実現したいこと
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}

あなたの回答
tips
プレビュー