ページ内リンクでハンバーガーメニューが閉じません

前提・実現したいこと

超初心者です。
ハンバーガーメニューでページ内リンクは出来ているのですが…
クリックと同時にメニューが閉じるようにしたいです。

該当のソースコード

html
1<header id="top-head">
2    <div class="inn">
3        <div id="mobile-head">
4            <div class="logo">
5              <p><a href="index.html"><img src="<?php echo get_template_directory_uri(); ?>/images/common/#" alt="ロゴマーク"></a></p>
6            </div>
7            <div id="nav-toggle">
8                <div>
9                    <span></span>
10                    <span></span>
11                    <span></span>
12                </div>
13            </div>
14        </div>
15        <nav id="global-nav">
16            <ul class="slab">
17                <li><a href="#news">NEWS</a></li>
18                <li><a href="#about">ABOUT</a></li>
19                <li><a href="#menu">MENU</a></li>
20                <li><a href="#access">ACCESS</a></li>
21                <li class="icon_insta"><a href="#" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/common/#" alt="インスタグラム"></a></li>
22            </ul>
23        </nav>
24    </div>
25</header>

css
1#top-head {
2    top: -100px;
3    position: absolute;
4    width: 100%;
5    /*argin: 100px auto 0;*/
6    padding: 30px 0 0;
7    line-height: 1;
8    z-index: 999;
9}
10#top-head a,
11#top-head {
12    color: #fff;
13    text-decoration: none;
14}
15#top-head .inn {
16    position: relative;
17}
18#top-head .logo {
19    float: left;
20    width: 260px;
21    height: auto;
22}
23#global-nav ul {
24    list-style: none;
25    position: absolute;
26    right: 0;
27    bottom: 0;
28    font-size: 14px;
29    letter-spacing: 0.1em;
30    margin:50px 0 0 0 ;
31}
32#global-nav ul li {
33    float: left;
34}
35#global-nav ul li a {
36    padding: 0 30px;
37}
38 
39/* Fixed */
40#top-head.fixed {
41    margin-top: 0;
42    top: 0;
43    position: fixed;
44    padding-top: 10px;
45    height: 60px;
46    background: #000;
47    transition: top 0.65s ease-in;
48    -webkit-transition: top 0.65s ease-in;
49    -moz-transition: top 0.65s ease-in;
50}
51#top-head.fixed .logo {
52    width: 200px;
53}
54#top-head.fixed #global-nav ul li a {
55    color: #fff;
56    padding: 0 15px;
57}
58 
59/* Toggle Button */
60#nav-toggle {
61    display: none;
62    position: absolute;
63    right: 5%;
64    top: 16px;
65    width: 30px;
66    height: 40px;
67    cursor: pointer;
68    z-index: 101;
69}
70#nav-toggle div {
71    position: relative;
72}
73#nav-toggle span {
74    display: block;
75    position: absolute;
76    height: 2px;
77    width: 100%;
78    background: #fff;
79    left: 0;
80    -webkit-transition: .35s ease-in-out;
81    -moz-transition: .35s ease-in-out;
82    transition: .35s ease-in-out;
83}
84#nav-toggle span:nth-child(1) {
85    top: 5;
86}
87#nav-toggle span:nth-child(2) {
88    top: 10px;
89}
90#nav-toggle span:nth-child(3) {
91    top: 20px;
92}
93
94@media screen and (max-width: 769px) {
95    #top-head,
96    .inn {
97        width: 100%;
98        padding: 0;
99    }
100    #top-head {
101        top: 0;
102        position: fixed;
103        margin-top: -60px;
104    }
105    /* Fixed reset */
106    #top-head.fixed {
107        padding-top: 0;
108        background: transparent;
109    }
110    #mobile-head {
111        background: #000;
112        width: 100%;
113        height: 56px;
114        z-index: 999;
115        position: relative;
116    }
117    #top-head.fixed .logo,
118    #top-head .logo {
119        position: absolute;
120        left: 5%;
121        top: 10px;
122        width: 200px;
123    }
124    #global-nav {
125        position: absolute;
126        top: -500px;
127        background: #000;
128        width: 100%;
129        text-align: center;
130        padding: 0;
131        -webkit-transition: .5s ease-in-out;
132        -moz-transition: .5s ease-in-out;
133        transition: .5s ease-in-out;
134    }
135    #global-nav ul {
136        list-style: none;
137        position: static;
138        right: 0;
139        bottom: 0;
140        font-size: 18px;
141    }
142    #global-nav ul li {
143        float: none;
144        position: static;
145    }
146    #top-head #global-nav ul li a,
147    #top-head.fixed #global-nav ul li a {
148        width: 100%;
149        display: block;
150        color: #fff;
151        padding: 25px 0;
152    }
153    #nav-toggle {
154        display: block;
155    }
156    /* #nav-toggle 切り替えアニメーション */
157    .open #nav-toggle span:nth-child(1) {
158        top: 11px;
159        -webkit-transform: rotate(315deg);
160        -moz-transform: rotate(315deg);
161        transform: rotate(315deg);
162    }
163    .open #nav-toggle span:nth-child(2) {
164        width: 0;
165        left: 50%;
166    }
167    .open #nav-toggle span:nth-child(3) {
168        top: 11px;
169        -webkit-transform: rotate(-315deg);
170        -moz-transform: rotate(-315deg);
171        transform: rotate(-315deg);
172    }
173    /* #global-nav スライドアニメーション */
174    .open #global-nav {
175        /* #global-nav top + #mobile-head height */
176        -moz-transform: translateY(556px);
177        -webkit-transform: translateY(556px);
178        transform: translateY(556px);
179        height: 100vh
180    }
181}

js
1(function($) {
2    $(function() {
3        var $header = $('#top-head');
4        // Nav Fixed
5        $(window).scroll(function() {
6            if ($(window).scrollTop() > 300) {
7                $header.addClass('fixed');
8            } else {
9                $header.removeClass('fixed');
10            }
11        });
12        // Nav Toggle Button
13        $('#nav-toggle').click(function(){
14            $header.toggleClass('open');
15        });      
16    });
17})(jQuery);

試したこと

似たような記事が他にもありましたので、色々と試してみましたが、どれも上手く行きませんでした。

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

回答1件

ベストアンサー

つまり、ハンバーガーメニュー内をクリックしたら閉じればいいんですよね？

js
1        $('#nav-toggle, #global-nav').click(function(){
2            $header.toggleClass('open');
3        });

スクリーンサイズの行き来があるとちょっと面倒ですが……

追記

よく考えると、面倒というほどでもないですね。

js
1        $('#global-nav').click(function(){
2            $header.removeClass('open');
3        });

投稿2020/05/18 01:56

編集2020/05/18 01:57

Lhankor_Mhy

総合スコア36142

aian

2020/05/18 02:26

早速のご回答ありがとうございます！閉じるようになりました！！「スクリーンサイズの行き来…」という部分が解らなかったのですが、追記いただいたのコードも書いた方が宜しいのでしょうか？

Lhankor_Mhy

2020/05/18 02:37

上の方のコードは、PCサイズの時にもトグルしてしまいます。気にならなければどちらでも構いませんよ。

aian

2020/05/18 03:35

丁寧・迅速なご回答をありがとうございます！！本当に助かりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！