ハンバーガーメニューでページ内リンクをクリックしたら閉じさせる

2020年6月26日

ディレクターが大好きなページ内リンク。

制作の私から見ると見辛いし…

ちょっとし調整も必要になるしで大嫌いです。

HTML

<a href="#" id="panel-btn" class="pc-none"><span id="panel-btn-icon"></span></a>
<div id="panel" class="nav">
  <nav class="global-nav">
    <ul>
      <li><a href="./">メニュー</a></li>
　　  <li><a href="./">メニュー</a></li>
      <li><a href="./">メニュー</a></li>
　　  <li><a href="./">メニュー</a></li>
    </ul>
  </nav>
</div>

jQuery

$(function() {
  $("#panel-btn").click(function() {
    $("#panel").fadeToggle(500);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
  
$(".global-nav li a").on("click", function() {
    $("#panel").slideToggle();
    $("#panel-btn-icon").removeClass("close");
});
  
});

よかったらシェアしてね！