ハンバーガーメニューが、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

前提・実現したいこと

ハンバーガーメニューが自動で閉じない、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

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

スマホ用の1ページのサイト用のハンバーガーメニューを作りたいのですが、
メニューをクリックした後、同一ページのためメニューが開きっぱなしになり、これをメニュークリックと同時に閉じるようにしたいのですが、苦戦しています。

様々に紹介されているcss、jQueryをいろいろ実装してみるのですが、
そのままコピペした時（<li><a href="">top</a></li>）はうまく動くのですが、実際にページ内のリンクを

<li><a href="#top">top</a></li> のように具体的に#アンカー名を入れるとその場所には飛ぶのですが、メニューが開いたままで閉じなくなってしまいます。

参考にしたサイト

https://www.aiship.jp/knowhow/archives/31639
https://tech-dig.jp/hamburger-global-nav/

実際の制作サイト

http://isuzukoryu.net/

実際に制作しているサイト

JQuery
1<script>
2$(function(){
3	$(".btn-gnavi").on("click", function(){
4		// ハンバーガーメニューの位置を設定するための変数
5		var rightVal = 0;
6		if($(this).hasClass("active")) {
7			// 「open」クラスを持つ要素はメニューを開いた状態に設定
8			rightVal = -300;
9			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
10			$(this).removeClass("active");
11		} else {
12			// 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
13			// メニューを開いたら次回クリック時は閉じた状態になるよう設定
14			$(this).addClass("open");
15		}
16
17		$("#global-navi").stop().animate({
18			right: rightVal
19		}, 200);
20	});
21});
22</script>

html
1<div id="wrapper">
2
3	<!--menu-->
4<p class="btn-gnavi">
5		<span></span>
6		<span></span>
7		<span></span>
8</p> 
9 
10<nav id="global-navi">
11<ul class="menu">     
12  <li><a href="#top">top</a></li>
13  <li><a href="#topics">お知らせ</a></li>
14  <li><a href="#lesson">教室案内</a></li>
15  <li><a href="#about">五十鈴古流のご紹介</a></li>
16  <li><a href="#portfolio">作品</a></li>
17  <li><a href="#book">写真集</a></li>
18  <li><a href="#contact">お問い合わせ</a></li>
19</ul>
20</nav> 
21</div>

css
1#global-navi {min-height:35px;/* */
2    background-color:#DB8E71;/*rgba(0,0,0,0.3) */
3    position: fixed;
4    top: 0;
5    right: 0px;
6    width: 100%;
7    z-index: 2;margin:auto;}
8#wrapper nav ul li{
9    display:inline-block;
10    font-size: 16px;
11    padding:10px;
12}
13#wrapper nav ul li a{color:#fff;text-decoration: none;}
14#wrapper a:hover{color:#b22222;}
15#wrapper nav ul{  font-size: 0;text-align: center; }
16
17
18@media screen and (max-width: 980px) {
19#wrapper nav {
20    position: fixed;
21    top: 0;
22    right: -300px;
23    width: 300px;
24    height: 100%;
25    padding-top: 50px;
26    background:#333;
27    font-size: 16px;
28    box-sizing: border-box;
29    z-index: 2
30}
31#wrapper nav ul li {
32    display:block;
33    padding: 20px 28px
34}
35 
36#wrapper nav ul li a  {
37    text-decoration: none;
38    color: #ddd
39}
40 
41#wrapper .btn-gnavi {
42    position: fixed;
43    top: 20px;
44    right: 20px;
45    width: 30px;
46    height: 24px;
47    z-index: 3;
48    box-sizing: border-box;
49    cursor: pointer;
50    -webkit-transition: all 400ms;
51    transition: all 400ms
52}
53 
54#wrapper .btn-gnavi span {
55    position: absolute;
56    width: 30px;
57    height: 4px;
58    background: #666;
59    border-radius: 10px;
60    -webkit-transition: all 400ms;
61    transition: all 400ms
62}
63 
64#wrapper .btn-gnavi span:nth-child(1) {
65    top: 0
66}
67 
68#wrapper .btn-gnavi span:nth-child(2) {
69    top: 10px
70}
71 
72#wrapper .btn-gnavi span:nth-child(3) {
73    top: 20px
74}
75 
76#wrapper .btn-gnavi.open {
77    -webkit-transform: rotate(180deg);
78    transform: rotate(180deg)
79}
80/*三本線の色 */ 
81#wrapper .btn-gnavi.open span {
82    background-color: #ddd 
83}
84
85#wrapper .btn-gnavi.open span {
86    width: 24px;
87}
88#wrapper .contents section p {
89    position: absolute;
90    top: 50%;
91    width: 30%;
92    line-height: 1.4;
93    font-size: 20px;
94    color: #fff;
95    text-shadow: 0 0 6px #666
96}
97 
98#wrapper .contents section:nth-child(odd) p {
99    left: 10%
100}
101 
102#wrapper .contents section:nth-child(even) p {
103    right: 10%
104}
105}

どうかお力をお貸しください（何度も見直していますが初心者ですので、なにかしら基本的なミスがあるかもしれません。）よろしくお願い致します。

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

回答1件

ベストアンサー

JavaScriptを以下のように修正したら動作すると思うのですが、どうでしょうか？
activeクラスとopenクラス両方使っているのが複雑に思えるので、activeクラスはCSSでも利用していなかったのて、openクラスだけで実装してみました。

js
1$(function() {
2  $(".btn-gnavi").on("click", function() {
3    // ハンバーガーメニューの位置を設定するための変数
4    var rightVal = 0;
5    if ($(this).hasClass("open")) {
6      // 「open」クラスを持つ要素はメニューを開いた状態に設定
7      rightVal = -300;
8      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
9      $(this).removeClass("open");
10    } else {
11      // 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
12      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
13      $(this).addClass("open");
14    }
15
16    $("#global-navi")
17      .stop()
18      .animate(
19        {
20          right: rightVal
21        },
22        200
23      );
24  });
25});
26

動くサンプルコードを書きましたので、よろしければ動作確認などしてみてください。
サンプルコード: CodePen

投稿2020/02/14 12:44

shgtkshruch

総合スコア665

Naka-chan

2020/02/14 14:47

ご丁寧にありがとうございます。やってみたのですが、やはりメニューが開いたままアンカーへ着地し、三本線をクリックしないとメニューが閉じません。 CodePenで作っていただいたサイトも何度も確認しましたがやはりメニューが閉じません。ブラウザーもスマホのChrome、PCのChromeとFOXと試してみましたが結果は変わらずでした。なかなか難しいです。。。