ページ内遷移で閉じるやつです。

head内に以下を読み込み

[html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> [/html]

html

[html] <div class="gnav-btn"> <div class="icon-animation"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> </div> <nav class="global"> <ul class="gnav scrollable-menu"> <li><a href="#sec1">ページ内遷移先</a></li> <li><a href="#sec2">ページ内遷移先</a></li> <li><a href="#sec3">ページ内遷移先</a></li> <li><a href="#sec4">ページ内遷移先</a></li> <li><a href="#sec5">ページ内遷移先</a></li> <li><a href="#sec6">ページ内遷移先</a></li> <li><a href="#sec7">ページ内遷移先</a></li> </ul> </nav> [/html]

css

[css] body, ul, li { margin: 0; padding: 0; } .wrapper { box-sizing: border-box; padding: 0 15px; margin: 55px 0; } img { max-width: 100%; height: auto; } header { box-sizing: border-box; background: #333; color: #ccc; padding: 1rem; position: fixed; width: 100%; top: 0; z-index: 98; } footer { background: #ccc; padding: 1rem; position: fixed; bottom: 0; width: 100%; z-index: 98; } /*nabi開閉部分*/ .gnav li { border-bottom: 1px solid #333; } .gnav li a { display: block; text-decoration: none; /* (44-16)/2=14px */ padding: .875rem 1rem; } .gnav { list-style-type: none; background: #eee; display: block; width: 70%; overflow-x: hidden; overflow-y: auto; position: fixed; left: 0; top: 55px; z-index: 99; visibility: hidden; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .gnav.on { visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .modal { background-color: rgba(255, 255, 255, .5); width: 100%; height: 100%; left: 0; opacity: .1; position: fixed; top: 0; z-index: 97; visibility: hidden; webkit-transition: visibility 0 linear .4s, opacity .4s; -moz-transition: visibility 0 linear .4s, opacity .4s; transition: visibility 0 linear .4s, opacity .4s; webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .modal.on { opacity: 1; webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; visibility: visible; } /*ハンバーガーボタン*/ .icon-animation { width: 44px; height: 44px; display: block; cursor: pointer; position: fixed; right: .5rem; top: .5rem; text-align: center; z-index: 99; } .icon-animation span { width: 44px; height: 1px; display: block; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -22px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .icon-animation .top { -webkit-transform: translateY(-13px); -ms-transform: translateY(-13px); transform: translateY(-13px); } .icon-animation .bottom { -webkit-transform: translateY(13px); -ms-transform: translateY(13px); transform: translateY(13px); } .is-open .middle { background: rgba(51, 51, 51, 0)!important; } .is-open .top { -webkit-transform: rotate(-45deg) translateY(0px); -ms-transform: rotate(-45deg) translateY(0px); transform: rotate(-45deg) translateY(0px); } .is-open .bottom { -webkit-transform: rotate(45deg) translateY(0px); -ms-transform: rotate(45deg) translateY(0px); transform: rotate(45deg) translateY(0px); } @media (min-width:736px) { header { display: block; } .global { width: 100%; position: relative; /*ナビ中央そろえ*/ overflow: hidden; /*ナビ中央そろえ*/ } .gnav-btn { display: none; } .gnav { list-style-type: none; background-color: inherit; display: block; overflow: visible; /*ナビ表示*/ position: fixed; /*ナビ中央そろえ*/ width: auto; left: 50%; /*ナビ中央そろえ*/ top: 0; z-index: 99; visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .gnav li { border-bottom: none; width: auto; position: relative; /*ナビ中央そろえ*/ left: -50%; /*ナビ中央そろえ*/ float: left; /*ナビ中央そろえ*/ } .gnav li a { display: block; text-decoration: none; padding: .875rem 0.5rem; color: #fff; } } [/css]

Jquery

[html] $(function() { $(‘body’).append(‘<div class="modal"></div>’); var gnav = $(‘.gnav’); var modal = $(‘.modal’); var gnavbtn = $(‘.gnav-btn’); $(window).resize(function() { gnav.css(‘transition’, ‘none’); modal.removeClass("on"); gnav.removeClass("on"); gnavbtn.removeClass(‘is-open’); }); gnavbtn.on(‘click’, function() { $(this).toggleClass(‘is-open’); gnav.css(‘transition’, ‘.5s .1s cubic-bezier(0, 0, .2, 0)’).toggleClass(‘on’); modal.toggleClass(‘on’); }); $(‘.gnav li,.modal’).on(‘click’, function() { modal.removeClass("on"); gnav.removeClass("on"); gnavbtn.removeClass(‘is-open’); }); $(window).on(‘load resize’,function() { var timer = false; if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { if (window.matchMedia("(max-width:737px)").matches) { //737px以下の場合 $(window).on(‘scroll’, function() { if ($(this).scrollTop() < 100) { $(‘header’).fadeIn(); $(‘.icon-animation span’).css(‘background-color’, ‘#fff’); } else { $(‘header’).fadeOut(); $(‘.icon-animation span’).css(‘background-color’, ‘#000’); } }); } else if (window.matchMedia("(min-width:736px)").matches){ $(window).off(‘scroll’); $(‘header’).show(); $(‘.icon-animation span’).css(‘background-color’, ‘#fff’); } }, 200); }) /*リンクの動きをゆっくり移動にするスクリプト*/ $("a[href*=#]").click(function() { $(‘html,body’).animate({ scrollTop: $($(this).attr("href")).offset().top – 0 }, ‘slow’, ‘swing’); /*クリックしたらナビを閉じる動作*/ modal.removeClass("on"); gnav.removeClass("on"); gnavbtn.removeClass(‘is-open’); //リンクを無効 return false; }) }); [/html]

先駆者様感謝です。
http://itstudio.co/2015/10/28/4876/