スマホ用にバーガーメニューを入れたのですがページ内遷移の時スクロールして移動するのですがメニューが開いたままになってしまいます。
移動するときにメニューを閉じたいのですがどの様にすればいいのでしょうか?
ご教授お願いいたします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6 <style> 7 .nav_container { 8 position: fixed; 9 top: 0; 10 width: 100%; 11 height: 50px; 12 z-index: 19; 13 background-color: #61a951; 14} 15.menu-trigger, .menu-trigger span { 16 display: inline-block; 17 transition: all .4s; 18 box-sizing: border-box; 19 cursor : pointer; 20} 21.menu-trigger { 22 position: fixed; 23 top: -5px; 24 right: 10px; 25 width: 35px; 26 height: 56px; 27 z-index: 20; 28} 29.menu-trigger span { 30 position: absolute; 31 background: #fff; 32 width: 35px; 33 height: 2px; 34 margin: auto; 35} 36.menu-trigger span:nth-of-type(1) { 37 top: 15px; 38} 39.menu-trigger span:nth-of-type(2) { 40 top: 0; 41 bottom: 0; 42} 43.menu-trigger span:nth-of-type(3) { 44 bottom: 15px; 45} 46.menu-trigger.active span:nth-of-type(1) { 47 -webkit-transform: translateY(12px) rotate(-45deg); 48 transform: translateY(12px) rotate(-45deg); 49} 50.menu-trigger.active span:nth-of-type(2) { 51 opacity: 0; 52} 53.menu-trigger.active span:nth-of-type(3) { 54 -webkit-transform: translateY(-12px) rotate(45deg); 55 transform: translateY(-12px) rotate(45deg); 56} 57.g-nav { 58 display: none; 59 position: fixed; 60 top: 0; 61 right: 0; 62 background:#ccc; 63 width: 100%; 64 height: 80%; 65 opacity: .98; 66 z-index: 10; 67} 68.list { 69 padding: 0px; 70 width: 80%; 71 margin: 10px auto; 72 margin-top: 10px; 73 list-style: none; 74 overflow-y: scroll; 75 -webkit-overflow-scrolling: touch; 76} 77.list .item { 78 border-bottom: 1px solid #000; 79} 80.item a { 81 display: block; 82 text-decoration: none; 83 color: #000; 84 padding: 25px 0 5px; 85 font-size: 1rem; 86 font-weight: 900; 87} 88.cont{ 89 width:100vw; 90 height:1000px; 91} 92 </style> 93 94 95<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 96 <script> 97 $(function(){ 98 $('.menu-trigger').on('click',function(){ 99 $(this).toggleClass('active'); 100 $('.g-nav').slideToggle(); 101 }); 102 }); 103 </script> 104</head> 105 106<body> 107 <div class="nav_container"> 108 <a class="menu-trigger"> <span></span> <span></span> <span></span> </a> 109 <nav class="g-nav"> 110 <ul class="list"> 111 <li class="item"><a href="#content_first">コンテンツ1</a></li> 112 <li class="item"><a href="#content_second">コンテンツ2</a></li> 113 <li class="item"><a href="#content_third">コンテンツ3</a></li> 114 <li class="item"><a href="#content_fourth">コンテンツ4</a></li> 115 </ul> 116 </nav> 117 </div> 118 <div id="content_first" class="cont">コンテンツ1 119 </div> 120 <div id="content_second" class="cont">コンテンツ2 121 </div> 122 <div id="content_third" class="cont">コンテンツ3 123 </div> 124 <div id="content_fourth" class="cont">コンテンツ4 125 </div> 126</body> 127</html>
プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
回答1件
あなたの回答
tips
プレビュー