ページ内リンクでもハンバーガーメニューを自動で閉じさせたい。

前提・実現したいこと

ハンバーガーメニューを実装したいのですが、リンク先を同じページ内の別の場所に設定し、ジャンプ後自動でメニューを閉じるようにしたい。

発生している問題・エラーメッセージ

メニューのリンク先を同一ページ内の別の場所にすると、ジャンプはするもののメニューが開いたままで閉じず、いちいちメニューボタンを押さなくてはいけない状態です。

エラーメッセージ

該当のソースコード

html/css/Javascript

**html**
<button type="button" class="menu-btn">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </button>
    <div class="menu">
      <div class="menu__item"><a href="index.html#top">ホーム</a></div>
      <div class="menu__item"><a href="mani.html#mani_link">メニュー１</a></div>
      <div class="menu__item"><a href="act.html#action">メニュー２</a></div>
      <div class="menu__item"><a href="prof.html#profile">メニュー３</a></div>
      <div class="menu__item"><a href="sup.html#sup">メニュー４</a></div>
    </div>

**css**
/*----------------------------
* メニュー本体
*----------------------------*/
.menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #173d97;
}
.menu__item{
  width: 100%;
  height: auto;
  padding: .5em 1em;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
.menu{
  transform: translateX(100vw);
  transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: translateX(0);
}

**Javascript**
<!--JavaScriptハンバーガーメニュー用-->
	<script>
	document.querySelector('.menu-btn').addEventListener('click', function(){
	document.querySelector('.menu').classList.toggle('is-active');
	});
	</script>

試したこと

リンク先を別ページにした場合は自動で閉じてくれました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/09/19 00:38

可能なら、コードはファイル毎にわけてください。

itagagaki

2021/09/19 00:51

> リンク先を別ページにした場合は自動で閉じてくれました。それって新しいページを開くので、新たなページのハンバーガーメニューが初期状態になっているだけですよね？

chibifafa

2021/09/19 05:22

m.ts10806様慣れておらず失礼いたしました。以後気を付けます。

chibifafa

2021/09/19 05:23

itagagaki様おっしゃる通り、別ページは初期状態のままにしておりました。失礼いたしました。

m.ts10806

2021/09/19 06:40

質問は編集できます。

行動規範の内容に同意します

回答1件

ベストアンサー

メニューをクリックしたとき閉じるようにしておけばいいのでは。

js
1const menu = document.querySelector('.menu');
2document.querySelector('.menu-btn').addEventListener('click', function(){
3  menu.classList.toggle('is-active');
4});
5menu.addEventListener('click', function(){
6  menu.classList.remove('is-active');
7});