実現したいこと
- ハンバーガーメニューを三本線→×に変化させたい
前提
初歩的な質問ですみません。
独学でGW中にフロントエンド言語を触り始めたばかりの初心者です。
VScodeにて、HTML,CSS,JavaScript(jQuery)のコードを記述しています。
発生している問題・エラーメッセージ
ハンバーガーメニューの三本線を×にするコードを記述したつもりだったのですが、
三本線を押しても×にならず、三本線のままです。
ハンバーガーメニューを押せば、表示されて欲しいメニューは表示されます。
該当のソースコード
html
1<link href="../css/common.css" rel="stylesheet"> 2 3<button class="toggle-menu-button"> 4 <span></span><span></span><span></span> 5</button> 6 7<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> 8<script src="../js/toggle-menu.js"></script>
css
1.toggle-menu-button { 2 display: block; 3 position: relative; 4 background: #fccad5; 5 cursor: pointer; 6 justify-content: center; 7 align-items: center; 8 width: 44px; 9 height: 34px; 10 border: none; 11 border-radius: 0px; 12 outline: none; 13} 14 15 /*ボタン内側*/ 16.toggle-menu-button span { 17 display: inline-block; 18 transition: all .4s; 19 position: absolute; 20 left: 12px; 21 height: 3px; 22 border-radius: 2px; 23 background: #fff; 24 width: 45%; 25} 26 27.toggle-menu-button span:nth-of-type(1) { 28 top: 7px; 29} 30 31.toggle-menu-button span:nth-of-type(2) { 32 top: 15px; 33} 34 35.toggle-menu-button span:nth-of-type(3) { 36 top: 23px; 37} 38 39 /*is-showクラスが付与されると線が回転して×に*/ 40.toggle-menu-button.is-show span:nth-of-type(1) { 41 top: 18px; 42 left: 18px; 43 transform: translateY(6px) rotate(-45deg); 44 width: 30%; 45} 46 47.toggle-menu-button.is-show span:nth-of-type(2) { 48 opacity: 0;/*真ん中の線は透過*/ 49} 50 51.toggle-menu-button.is-show span:nth-of-type(3) { 52 top: 30px; 53 left: 18px; 54 transform: translateY(-6px) rotate(45deg); 55 width: 30%; 56}
js
1window.addEventListener('load', function () { 2 var $button = document.querySelector('.toggle-menu-button'); 3 var $menu = document.querySelector('.header-site-menu'); 4 $button.addEventListener('click', function () { 5 if ($menu.classList.contains('is-show')) { 6 $menu.classList.remove('is-show'); 7 } 8 else { 9 $menu.classList.add('is-show'); 10 } 11 }); 12});
試したこと
こちらのサイトを参考にしました。
https://coco-factory.jp/ugokuweb/move01/5-2-1/

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。