Q&A
実害はないですがhumberger_wrapperとhamburgerのツヅリのブレが気になります
ハンバーガーメニュー内のアンカーリンクを押下後、メニューを閉じるようにしたいです。
JSを試しましたが、うまく行かず困っています。
HTML
1 <div class="humberger_wrapper"> 2 <div class="hamburger"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </div> 7 <nav class="menu"> 8 <ul> 9 <li> 10 <a href=""><img src="img/sample_menu.png" alt="sample_menu"></a> 11 </li> 12 <li><a href="#cd_1">sample1</a></li> 13 <li><a href="#cd_2">sample2</a></li> 14 <li><a href="#cd_3">sample3</a></li> 15 <li><a href="#cd_4">sample4</a></li> 16 <li><a href="#cd_5">sample5</a></li> 17 <li><a href="#cd_6">sample6</a></li> 18 </ul> 19 </nav> 20 </div>
CSS
1 .humberger_wrapper { 2 display: block; 3 position: relative; 4 background: #f5f5f5; 5 } 6 .hamburger img { 7 position: absolute; 8 top: -10px; 9 } 10 .hamburger { 11 width: 17%; 12 height: 50px; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 position: absolute; 17 z-index: 999; 18 } 19 .hamburger:hover { 20 cursor: pointer; 21 } 22 .hamburger span { 23 background: #fff; 24 width: 35px; 25 height: 2px; 26 position: absolute; 27 transition: 0.3s ease-out; 28 } 29 .hamburger span:nth-of-type(1) { 30 top: 15px; 31 } 32 .hamburger span:nth-of-type(3) { 33 bottom: 15px; 34 } 35 .hamburger.active span:nth-of-type(1) { 36 transform: translateY(9px) rotate(-45deg); 37 transition: 0.3s ease-out; 38 background: #1D2D61; 39 } 40 .hamburger.active span:nth-of-type(3) { 41 transform: translateY(-9px) rotate(45deg); 42 transition: 0.3s ease-out; 43 background: #1D2D61; 44 } 45 .hamburger.active span:nth-of-type(2) { 46 opacity: 0; 47 } 48 .menu { 49 width: 230px; 50 height: 560px; 51 /* height: 650px; */ 52 background: #ffffff; 53 color: #656363; 54 position: absolute; 55 top: -10px; 56 z-index: 99; 57 padding-top: 25%; 58 transform: translate(-300px); 59 transition: 0.3s ease-out; 60 } 61 .menu a { 62 color: #656363; 63 } 64 .menu li { 65 margin-bottom: 18%; 66 text-align: center; 67 } 68 .menu.open { 69 transform: translate(0); 70 transition: 0.3s ease-out; 71 } 72 .menu.open img { 73 width: 60%; 74 }
JS
1$(function() { 2 $('.hamburger').click(function() { 3 $('.hamburger').toggleClass('active'); 4 $('.menu').toggleClass('open'); 5 }); 6});
↑こちらだとうまく動きます。
JS
1$(function() { 2 $('.hamburger').click(function() { 3 $(this).toggleClass('active'); 4 5 if ($(this).hasClass('active')) { 6 $('.menu').addClass('active'); 7 } else { 8 $('.menu').removeClass('active'); 9 } 10 }); 11 $('.menu a').click(function() { 12 $('.hamburger').trigger('click'); 13 }); 14});
↑こちらだとうまくいきません
回答1件
0
ベストアンサー
.menuに対してうまくいく方はopenクラスをつけ外ししてますが
うまくいかない方はactiveクラスをつけ外ししてます
投稿2020/05/08 02:29
総合スコア116724
うまくいきました！ありがとうございます。
こんな風にしてもよいかも
$(function() {
$('.hamburger').on('click',function() {
$('.hamburger').toggleClass('active');
$('.menu').toggleClass('open',$(this).hasClass('active'));
});
$('.menu a').on('click',function() {
$('.hamburger').trigger('click');
});
});
行けました。ありがとうございます！
あなたの回答
tips
プレビュー
