ハンバーガーメニューを見様見真似で作ったのですが、思う挙動になりません。
①3本のマーク(ハンバーガーメニューのアイコン)をクリック → ②×になる、sp_navクラスが表示される
→③×をクリック → ④sp_navクラスが非表示になる、3本のマークが表示される
この挙動にしたいのですが、④でsp_navクラスが非表示になりません。もう一度クリックすると非表示になるのですが、、、何故なのでしょうか。改善策を教えていただきたいです。
判断するのに足りないコード等ありましたら追記しますので、コメントお願いします。
JQuery
1$('.openbtn').on('click',function(){ 2 $('.openbtn').toggleClass('active'); 3 $('.sp_nav').toggleClass('active'); 4 $('.sp_nav.active').fadeToggle(500); 5 });
HTML
1<!--スマホ ナビゲーション--> 2 <nav class="sp_nav"> 3 <ul> 4 <li class="h_nav sp_list"> 5 <a href="newlife_top.html">Home</a> 6 </li> 7 <li class="h_nav sp_list"> 8 <a href="newlife_news.html">News</a> 9 </li> 10 <li class="h_nav sp_list"> 11 <a href="newlife_top.html">Access</a> 12 </li> 13 <li class="h_nav sp_list"> 14 <a href="newlife_news.html">Contact</a> 15 </li> 16 </ul> 17 </nav> 18 19<!--ハンバーガーメニュー--> 20<div class="openbtn"> 21 <span></span> 22 <span></span> 23 <span></span> 24</div>
CSS
1/*activeクラス付与で線が回転して×になる*/ 2.openbtn.active span:nth-of-type(1) { 3 top: 16px; 4 left: 16px; 5 transform: translateY(6px) 6 rotate(-45deg); 7 width: 30%; 8} 9.openbtn.active span:nth-of-type(2) { 10 opacity: 0; 11} 12.openbtn.active span:nth-of-type(3) { 13 top: 28px; 14 left: 16px; 15 transform: translateY(-6px) 16 rotate(45deg); 17 width: 30%; 18} 19.sp_nav { 20 display: none; 21 margin-top: 80px; 22 z-index: 10; 23 width: 100%; 24 height: 100vh; 25 margin-left: auto; 26 color: #efefef; 27 background-color: rgba(225, 244, 247, 0.7); 28} 29.sp_nav ul { 30 width: 100%; 31 height: 100%; 32 padding: calc(((100vh - 75%) - 80px) / 2) 0; 33}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/05 03:34