ページ内リンクを押した際にドロワーメニューの表示を消したい。
ドロワーメニューからページ内リンクで移動した際にメニューが開きっぱなしになってしまいます。
リンク先に飛んだタイミングでドロワーメニューを閉じるにはどうしたら良いでしょうか?
自分でもやり方を調べたのですが、初心者ゆえ解決できなかったので、教えて頂きたいです。
該当のソースコード
HTML
1 <div class="sp_navi"> 2 <div class="wrapper"> 3 <div class="menu-trigger"> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div> 8 <nav class="menu"> 9 <ul> 10 <li><a href="#About">About</a></li> 11 <li><a href="#Menu">Menu</a></li> 12 <li><a href="#News">News</a></li> 13 <li><a href="#Access">Access</a></li> 14 <li><a href="contact.html">Contact</a></li> 15 </ul> 16 </nav> 17 <div class="overlay"></div> 18 </div> 19 </div>
css
1 2.wrapper { 3 height: 100%; 4 overflow-x: hidden; 5 position: relative; 6} 7 8.overlay { 9 content: ""; 10 display: block; 11 width: 0; 12 height: 0; 13 background-color: rgba(0, 0, 0, 0.5); 14 position: absolute; 15 top: 0; 16 left: 0; 17 z-index: 2; 18 opacit 19 transition: all .5s; 20 display: flex; 21 flex-direction: column; 22 23} 24 25main.open { 26 transform: translateX(-250px); 27} 28 29.menu-trigger { 30 display: inline-block; 31 widthy: 0; 32 transition: opacity .5s; 33} 34 35.overlay.open { 36 width: 100%; 37 height: 100%; 38 opacity: 1; 39} 40 41main { 42 height: 100%; 43: 36px; 44 height: 28px; 45 vertical-align: middle; 46 cursor: pointer; 47 position: fixed; 48 top: 33px; 49 right: 40px; 50 z-index: 100; 51 @media(max-width: 399px) { 52 right:10px; 53 } 54 /* transform: translateX(0); 55 transition: transform .5s; 56 */ 57} 58 59/* .menu-trigger.active { 60 transform: translateX(-250px); 61} 62 */ 63 64.menu-trigger span { 65 display: inline-block; 66 box-sizing: border-box; 67 position: absolute; 68 left: 0; 69 width: 100%; 70 height: 4px; 71 background-color: #000; 72 transition: all .5s; 73} 74 75.menu-trigger.active span { 76 background-color: #fff; 77} 78 79.menu-trigger span:nth-of-type(1) { 80 top: 0; 81} 82 83.menu-trigger.active span:nth-of-type(1) { 84 transform: translateY(12px) rotate(-45deg); 85} 86 87.menu-trigger span:nth-of-type(2) { 88 top: 12px; 89} 90 91.menu-trigger.active span:nth-of-type(2) { 92 opacity: 0; 93} 94 95.menu-trigger span:nth-of-type(3) { 96 bottom: 0; 97} 98 99.menu-trigger.active span:nth-of-type(3) { 100 transform: translateY(-12px) rotate(45deg); 101} 102 103nav { 104 width: 250px; 105 height: 100%; 106 padding-top: 100px; 107 background-color: #e74e4fbf; 108 position: fixed; 109 top: 0; 110 right: 0; 111 z-index: 10; 112 transform: translate(250px); 113 transition: all .5s; 114} 115 116nav.open { 117 transform: translateZ(0); 118} 119 120nav li { 121 color: #fff; 122 text-align: center; 123 padding: 10px 0; 124 list-style: none; 125 126 127 a { 128 color: white; 129 text-decoration: none; 130 } 131 132
jquery
1 <script> 2 $('.menu-trigger').on('click', function() { 3 if ($(this).hasClass('active')) { 4 $(this).removeClass('active'); 5 $('main').removeClass('open'); 6 $('nav').removeClass('open'); 7 $('.overlay').removeClass('open'); 8 } 9 else { 10 $(this).addClass('active'); 11 $('main').addClass('open'); 12 $('nav').addClass('open'); 13 $('.overlay').addClass('open'); 14 } 15 }); 16 $('.overlay').on('click', function() { 17 if ($(this).hasClass('open')) { 18 $(this).removeClass('open'); 19 $('.menu-trigger').removeClass('active'); 20 $('main').removeClass('open'); 21 $('nav').removeClass('open'); 22 } 23 }); 24 </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/19 07:02
2021/02/19 07:09
2021/02/19 07:21
2021/02/19 07:29