ガラ

ここからはじめよう

2020.06.26
jQuery

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

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

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

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

 

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");
});
  
});

 

 

 

 

お勧めの記事

過去の記事