同じページ内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。
【現状】
同じページ内のリンクをクリックとすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままです。
【やりたい事】
ハンバーガーメニュー内のリンクをクリックで該当箇所まで移動と同時にハンバーガーメニューを閉じたいです。
【試したこと】
似たような質問を見たり調べたりして、様々なコードを試してみましたが、ハンバーガーメニューを閉じることができません。
JS初心者です。助けてください。よろしくお願いいたします。
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 6<title></title> 7<meta name="description" content="" /> 8<meta name="Keywords" content="" /> 9<meta name="author" content=""> 10<meta name="copyright" content=""> 11<link rel="stylesheet" href="css/style.css" /> 12</head> 13<body> 14<header> 15<h1><a href="index.html"></a></h1> 16<a class="menu_btn"> 17 <span class="top"></span> 18 <span class="middle"></span> 19 <span class="bottom"></span> 20</a> 21<nav id="g_navi"> 22 <ul> 23 <li><a href="index.html">HOME</a></li> 24 <li><a href="#001">001</a></li> 25 <li><a href="#002">002</a></li> 26 <li><a href="#003">003</a></li> 27 </ul> 28</nav> 29</header> 30 31<a id="001"></a> 32<br> 33<br> 34<br> 35aaaaaaaa 36<br> 37<br> 38<a id="002"></a> 39<br> 40<br> 41<br> 42bbbbbbb 43<br> 44<br> 45<a id="003"></a> 46<br> 47<br> 48<br> 49ccccccc 50<br> 51<br> 52<footer></footer> 53<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 54<script src="js/script.js"></script> 55</body> 56</html> 57
CSS
1@charset "utf-8"; 2 3* { 4 padding: 0; 5 margin: 0; 6 -webkit-box-sizing: border-box; 7 -moz-box-sizing: border-box; 8 box-sizing: border-box; 9} 10 11html { height: 100%;} 12 13body { 14 color: #111; 15 background-color: #F6F6F6; 16 font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "MS ゴシック", "MS Gothic", sans-serif; 17 word-wrap: break-word; 18 height: 100%; 19 line-height: 2.2; 20} 21/* 22メニューボタン 23-------------------------------------------*/ 24.menu_btn { 25 display: block; 26 height: 40px; 27 width: 40px; 28 text-align: center; 29 padding-top: 5px; 30 padding-bottom: 5px; 31 position: fixed; 32 z-index: 5000; 33 top: 5px; 34 right: 5px; 35 cursor: pointer; 36} 37.menu_btn:hover { 38 cursor: pointer; 39} 40 41.menu_btn span { 42 width: 28px; 43 height: 2px; 44 display: block; 45 position: absolute; 46 left: 50%; 47 top: 50%; 48 margin-left: -14px; 49 background-color: #111; 50} 51 52header.txt_w .menu_btn span { 53 background-color: #FFBF00; 54} 55header.txt_w.fixed .menu_btn span { 56 background-color: #111; 57} 58 59.menu_btn span { 60 transition: all 0.3s; 61 transform: rotate(0deg); 62 -webkit-transform: rotate(0deg); 63 -moz-transform: rotate(0deg); 64 } 65.menu_btn span.top { 66 transform: translateY(-8px); 67 -webkit-transform: translateY(-8px); 68 -moz-transform: translateY(-8px); 69 } 70.menu_btn span.bottom { 71 transform: translateY(8px); 72 -webkit-transform: translateY(8px); 73 -moz-transform: translateY(8px); 74} 75 76 77.menu_btn:hover span.top { 78 transform: translateY(-10px); 79 -webkit-transform: translateY(-10px); 80 -moz-transform: translateY(-10px); 81} 82.menu_btn:hover span.bottom { 83 transform: translateY(10px); 84 -webkit-transform: translateY(10px); 85 -moz-transform: translateY(10px); 86} 87 88.menu_btn.opened span { 89 background-color: #555; 90} 91 92.menu_btn.opened span.middle { 93 background: rgba(255, 255, 255, 0) !important; 94 transform: translateX(30px); 95 -webkit-transform: translateX(30px); 96 -moz-transform: translateX(30px); 97} 98.menu_btn.opened span.top { 99 transform: rotate(-45deg) translateY(0px); 100 -webkit-transform: rotate(-45deg) translateY(0px); 101 -moz-transform: rotate(-45deg) translateY(0px); 102} 103.menu_btn.opened span.bottom { 104 transform: rotate(45deg) translateY(0px); 105 -webkit-transform: rotate(45deg) translateY(0px); 106 -moz-transform: rotate(45deg) translateY(0px); 107} 108 109/* 110グローバルナビ 111-------------------------------------------*/ 112#g_navi { 113 position: fixed; 114 width: 100%; 115 height: 100%; 116 top: 0px; 117 overflow: auto; 118 z-index: 3000; 119 background-color: #F6F6F6; 120 background-color: rgba(246,246,246,0.85); 121 display: none; 122 padding-left: 10%; 123} 124#g_navi ul { 125 display: -webkit-flex; 126 display: flex; 127 -webkit-flex-flow: column; 128 flex-flow: column; 129 -webkit-justify-content: center; 130 justify-content: center; 131 min-height: 100%; 132} 133 134 135#g_navi ul li a { 136 color: #111; 137 text-decoration: none; 138 display: block; 139 padding: 10px; 140 line-height: 22px; 141 font-size: 14px; 142 font-weight: bold; 143 letter-spacing: 1px; 144} 145#g_navi ul li a:hover { 146 color: #111; 147} 148 149#g_navi ul li.contact a { 150 text-align: center; 151 background-color: #FFBF00; 152 color: #000; 153 width: 90%; 154} 155 156#g_navi ul li.contact a:hover { 157 background-color: #FFF; 158 color: #111;
JS
1$('.effect').on('inview', function() { 2 var $item = $(this); 3 $item.addClass('start'); 4}); 5 6var $header = $('header'); 7 8var w_h = $(window).height(); 9var topBtn = $('.to_top'); 10 11 12 13$(window).scroll(function () { 14 var w_h = $(window).height(); 15 var s_top = $(this).scrollTop(); //スクロールの値を取得 16 var l_top = w_h / 2; 17 var ml_top = l_top + s_top / 2; 18 19 if ($(this).scrollTop() > 100 && menuOpen == false) { 20 topBtn.fadeIn(); 21 } else { 22 topBtn.fadeOut(); 23 } 24 if ($(window).scrollTop() > 100) { 25 $header.addClass('fixed'); 26 } else { 27 $header.removeClass('fixed'); 28 } 29}); 30 31 32$(function(){ 33 34 topBtn.hide(); 35 36$('a[href^=#]').click(function(){ 37var speed = 500; 38var href= $(this).attr("href"); 39var target = $(href == "#" || href == "" ? 'html' : href); 40var position = target.offset().top; 41$("html, body").animate({scrollTop:position}, speed, "swing"); 42return false; 43 44}); 45 46 47}); 48 49 50//スマホメニュー 51var bnrBtn = $('#g_navi'); 52var menuOpen = false; 53var scrollpos; 54 55$('.bg_bl').hide(); 56 57var ttt = false; 58 59 60$(function(){ 61 $(".menu_btn").on("click", function() { 62 if(ttt == false) { 63 bnrBtn.stop().fadeIn(); 64 menuOpen = true; 65 $('.om').hide(); 66 $('.to_top').hide(); 67 $('#foot_bn').hide(); 68 $('.bg_bl').fadeIn(); 69 scrollpos = $(window).scrollTop(); 70 $('body').addClass('fixed').css({'top': -scrollpos}); 71 $(".menu_btn").addClass('opened'); 72 ttt = true; 73 } else { 74 bnrBtn.stop().fadeOut(); 75 menuOpen = false; 76 $('.om').show(); 77 $('.bg_bl').fadeOut(); 78 $('body').removeClass('fixed').css({'top': 0}); 79 $(".menu_btn").removeClass('opened'); 80 window.scrollTo( 0 , scrollpos ); 81 ttt = false; 82 } 83 }); 84}); 85 86 87//アコーディオン 88$(function(){ 89 $(".ac_menu").on("click", function() { 90 $(this).next().slideToggle(); 91 $(this).toggleClass("active"); 92 }); 93}); 94 95// サイトアクセス時フェードイン 96$(function(){ 97 98 $('body').hide(); 99 $('body').fadeIn(300); 100 101}); 102 103 104$(window).fadeThis(); 105 106 107 108 109