ハンバーガーボタン内のリンクをクリックした後ナビを自動で閉じるようにしたい

Question

前提・実現したいこと

１ページのみのWEBサイト作成中です。初心者です。

width:999以下でハンバーガーボタンを表示するようにしました。
ですがハンバーガーボタン内のリンクを押してもその場所には飛ぶのですが、ナビゲーションが開いたままになってしまします。

リンクを押したらナビを閉じてそのページに飛ぶようにしたいです。

該当のソースコード

<header class="header">
  <div class="header-content-wrapper">
    <h1 class="nav_title"><a href="#0">AAA</a></h1>
    <div id="open-button" class="open-button"><span></span></div>
    <nav >
      <div id="close-button" class="close-button">×</div>
      <ul id="nav">
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></li>
      </ul>
    </nav>
  </div>
</header>

@media(min-width:1000px) {
  .header {
    height: 83px;
  }
  .header-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
  }
  .header h1 {
    font-size: 1.4rem;
    padding-top: 26px;
    position: absolute;
    left: 0;
    font-weight: 600;
  }
  .body_purple .header h1 {
    font-size: 1.4rem;
    padding-top: 26px;
    position: absolute;
    left: 0;
    font-weight: 600;
  }
  .header nav {
    display: block;
    text-align: right;
  }
  .header nav ul {
    display: flex;
    justify-content: flex-end;
  }
  .header nav li a {
    display: block;
    padding: 26px 30px 0;
    color: #404040;
    text-decoration: none;
    font-size: 1.0rem;
    height: 83px;
  }
  .body_purple .header nav li a {
    display: block;
    padding: 26px 30px 0;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 1.0rem;
    height: 83px;
  }
}

$('.close-button, .open-button').on("click", function () {
    $('.header nav').slideToggle();
  }); 

Answer 1

クリックイベントの対象に、.header nav.header nav a も追加する。(close-buttonをクリックすると閉じた後開くバグに対処するためにコードを修正しました。)

$('.close-button, .open-button, .header nav a').on("click", function () {
    $('.header nav').slideToggle();
  }); 

レスポンシブ対応

追記されたCSSのメディアクエリで、画面幅1000px以上ではナビメニューを表示した状態にする。
display: block に !important をつけるのが簡単でしょう。

@media(min-width:1000px) {

/* 略 */

  .header nav {
    display: block !important;
    text-align: right;
  }

jQuery の方は、matchMedia を使うといいでしょう。

$('.close-button, .open-button, .header nav a').on("click", function () {
  if (window.matchMedia('(max-width: 1000px)').matches) {
    $('.header nav').slideToggle();
  }
});

Comments

[mimimi_665]

早速のお返事ありがとうございます。

ハンバーガーの方はできるようになりました！
ですが、width:1000px以上でハンバーガーではなく横並びのナビを設定しており、
width:1000px以上の時にaタグを押すと消えてしまうようになりました・・・；；

width:1000px以上では表示のままにし、ハンバーガーのときは教えていただいたように実行するにはどうしたら良いでしょうか・・・

[hatena19]

> ですが、width:1000px以上でハンバーガーではなく横並びのナビを設定しており、

これをどのように実装しているのかの説明とコードを質問に追記してください。

[hatena19]

とあえず、下記でどうでしょう。

$('.close-button, .open-button, .header nav a').on("click", function () {
if (window.matchMedia('(max-width: 1000px)').matches) {
$('.header nav').slideToggle();
}
});

ただし、メニューを閉じた状態から画面を広げた場合に再度表示させたりする処理が必要になると思います。

[mimimi_665]

回答ありがとうございます。

教えていただいたコード試したところ、おっしゃる通りメニューを閉じた状態から画面を広げた場合にaタグが消えてしまいました。

CSSを追記しましたのでご確認いただけますでしょうか・・・！よろしくお願いいたします。

[mimimi_665]

できました。
本当に助かりました。ありがとうございます！！