タイトルの通りで、ハンバーガーメニューをページ内リンクをクリックした際に閉じたいのですが、うまくいきません
現状のコードは以下になります。
JS
1<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('.gnav_toggle').click(function() { 5 $(this).toggleClass('active'); 6 7 if ($(this).hasClass('active')) { 8 $('.gnav').addClass('active'); 9 } else { 10 $('.gnav').removeClass('active'); 11 } 12 }); 13 }); 14 </script>
CSS
1.gnav { 2 width: 20%; 3 height: 100%; 4 position: fixed; 5 z-index: 20; 6 top: 0; 7 right: 0; 8 background: #2B2B2B; 9 color: #fff; 10 text-align: left; 11 padding: 24px; 12 transform: translateX(100%); 13 transition: all 0.6s; 14} 15 16.gnav ul { 17 width: 100%; 18 position: absolute; 19 top: 50%; 20 transform: translateY(-50%); 21 -webkit-transform: translateY(-50%); 22 -ms-transform: translateY(-50%); 23} 24 25.gnav ul li { 26 width: 100%; 27 font-size: 18px; 28 list-style-type: none; 29} 30 31.gnav ul li a { 32 display: block; 33 color: #fff; 34 padding: 1em 0; 35} 36 37.gnav_appstore { 38 39} 40 41/* このクラスを、jQueryで付与・削除する */ 42.gnav.active { 43 transform: translateX(0%); 44} 45 46.gnav_toggle { 47 display: block; 48 width: 36px; 49 height: 36px; 50 cursor: pointer; 51 z-index: 30; 52 position: absolute; 53 top: 50%; 54 bottom: 0; 55 right: 16px; 56 transform: translateY(-50%); 57 -webkit-transform: translateY(-50%); 58 -ms-transform: translateY(-50%); 59} 60 61.gnav_toggle span { 62 display: block; 63 width: 25px; 64 border-bottom: solid 2px #2B2B2B; 65 -webkit-transition: .35s ease-in-out; 66 -moz-transition: .35s ease-in-out; 67 transition: .35s ease-in-out; 68} 69 70.gnav_toggle span:nth-child(1) { 71 position: absolute; 72 top: 10px; 73 left: 50%; 74 transform: translateX(-50%); 75 -webkit-transform: translateX(-50%); 76 -ms-transform: translateX(-50%); 77} 78 79.gnav_toggle span:nth-child(2) { 80 position: absolute; 81 top: 24px; 82 left: 50%; 83 transform: translateX(-50%); 84 -webkit-transform: translateX(-50%); 85 -ms-transform: translateX(-50%); 86} 87 88/* 最初のspanをマイナス45度に */ 89.gnav_toggle.active span:nth-child(1) { 90 -webkit-transform: rotate(-45deg); 91 -moz-transform: rotate(-45deg); 92 transform: rotate(-45deg); 93 top: 17px; 94 left: 7px; 95 border-color: #fff; 96} 97 98/* 2番目と3番目のspanを45度に */ 99.gnav_toggle.active span:nth-child(2), 100.gnav_toggle.active span:nth-child(3) { 101 -webkit-transform: rotate(45deg); 102 -moz-transform: rotate(45deg); 103 transform: rotate(45deg); 104 top: 17px; 105 left: 7px; 106 border-color: #fff; 107}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。