ハンバーガーメニューをクリックで閉じたいです

実行したいこと

レスポンシブにしてメニューボタンをクリックし、バツになった時にメニューを閉じたいのですが閉じられません。
コードは以下のサイトを参考にしています。

最近jsやjQを勉強し始めた初心者です。
単純な質問で恐れ入りますが、以下のコードをどう書いたら実行されるのかお手上げ状態になりました。どなたかご教示いただけましたら幸いです。
よろしくお願いいたします。

参考にしたサイト様

モーダルの動き
https://haniwaman.com/responsive-menu/#i-9

メニューサンプル（2番目のボタンです）
https://125naroom.com/web/2958

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ハンバーガーメニュー</title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/layout03.css">
10</head>
11	
12<body>
13	<div class="icon-hamburger"><span></span></div>
14	<div class="btn-trigger" id="btn02">
15	  <span></span>
16	  <span></span>
17	  <span></span>
18	</div>
19
20	<nav class="menu-container">
21	  <ul class="menu">
22		<li class="menu-item"><a href="#">ホーム</a></li>
23		<li class="menu-item"><a href="#">ページ A</a></li>
24		<li class="menu-item"><a href="#">ページ B</a></li>
25		<li class="menu-item"><a href="#">ページ C</a></li>
26		<li class="menu-item"><a href="#">ページ D</a></li>
27		<li class="menu-item"><a href="#">ページ E</a></li>
28	  </ul>
29	</nav>
30<script src="js/jquery-1.12.4.min.js"></script>	
31<script src="js/index03.js"></script>
32</body>
33</html>

css
1/*PC版メニューのデザイン*/
2.menu-container { margin: 0; }
3.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
4.menu-container .menu .menu-item { flex: 1; }
5.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; }
6.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; }
7.menu-container .menu .menu-item:last-child a { border-right: none; }
8
9#modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
10
11@media screen and (max-width: 768px) {
12	/*ハンバーガーアイコン*/
13	.btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; }
14	.btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; }
15	.btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box }
16	.btn-trigger span:nth-of-type(1) { top: 28%; }
17	.btn-trigger span:nth-of-type(2) { top: 50%; }
18	.btn-trigger span:nth-of-type(3) { bottom: 25%; }
19
20	/*閉じるアイコン*/
21	.btn-trigger.active span:nth-of-type(1) {　-webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
22	.btn-trigger.active span:nth-of-type(2) { opacity: 0; }
23	.btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
24
25	/*メニューの中身*/
26	.menu-container .menu { -webkit-transform: translate(-50%, -50%); display: none; height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; }
27	.menu-container .menu .menu-item a { color:#fff; border-right: none; }
28	.menu-container .menu .menu-item a:hover { background: none; color: #ccc; }
29	.menu-container .menu .menu-item:last-child a { border-bottom: none; }
30}
31

js
1$(function(){
2	$('.btn-trigger').on('click', function() {
3		$('body').append('<div id="modal-overlay"></div>');
4		$('#modal-overlay').fadeIn('1500');
5		$('.menu-container .menu').fadeIn('1500');
6		$(this).toggleClass('active');
7	});
8});

追記__コメント欄記載の現象【1】【2】発生後の検証コードです（2020'06'09追記）

【現象2】に関しては、メディアクエリ内の/メニューの中身/<.menu-container .menu>のdisplayをblockに変更し、画面幅に併せて表示／非表示になりましたが、そうすることにより、レスポンシブ化した際のメニューが表示されたままになります。（当然ですよね・・・・）
そこで、<.menu-container .menu.close>を作成し、透明0／ボタンを押せなくしてjsに当てるといけるかも？と思い、試してみましたが、書き方がよろしくないのか思うようにいきません。
コードは以下です。ご検証のほどよろしくお願い申し上げます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ハンバーガーメニュー</title>
8<link rel="stylesheet" href="css/reset.css">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10<style>
11/*PC版メニューのデザイン*/
12body { background-color: #e9967a; }	
13.menu-container { margin: 0; }
14.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
15.menu-container .menu .menu-item { flex: 1; }
16.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; }
17.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; }
18.menu-container .menu .menu-item:last-child a { border-right: none; }
19
20
21@media screen and (max-width: 768px) {
22    /*ハンバーガーアイコン*/
23    .btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; }
24    .btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; }
25    .btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box }
26    .btn-trigger span:nth-of-type(1) { top: 28%; }
27    .btn-trigger span:nth-of-type(2) { top: 50%; }
28    .btn-trigger span:nth-of-type(3) { bottom: 25%; }
29
30    /*閉じるアイコン*/
31    .btn-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
32    .btn-trigger.active span:nth-of-type(2) { opacity: 0; }
33    .btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
34
35    /*メニューの中身*/
36    .menu-container .menu { -webkit-transform: translate(-50%, -50%); display: block;/*noneから変更してみました*/ height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; }
37    .menu-container .menu .menu-item a { color:#fff; border-right: none; }
38    .menu-container .menu .menu-item a:hover { background: none; color: #ccc; }
39    .menu-container .menu .menu-item:last-child a { border-bottom: none; }
40  
41	/*オーバーレイ →こちらに移動しました*/
42	.modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
43	
44	.menu-container .menu.close { opacity: 0; visibility: hidden; } /*追記してみました*/
45	
46}
47</style>
48<script>
49    $(function(){
50    $('.btn-trigger').on('click', function() {
51        if ($('header').hasClass('modal-overlay') == false) {
52            $('header').addClass('modal-overlay');
53            $('header').fadeIn('1500');
54            $('.menu-container .menu').fadeIn('1500');
55            $(this).toggleClass('active');
56        } else {
57            $('header').removeClass('modal-overlay');
58            $(this).toggleClass('active');
59            $(this).toggleClass('.menu-container .menu.close'); /*追記してみました*/
60        }
61    });
62});
63</script>
64</head>
65
66<body>
67    <header>
68        <div class="icon-hamburger"><span></span></div>
69        <div class="btn-trigger" id="btn02">
70            <span></span>
71            <span></span>
72            <span></span>
73        </div>
74
75        <nav class="menu-container">
76            <ul class="menu">
77                <li class="menu-item"><a href="#">ホーム</a></li>
78                <li class="menu-item"><a href="#">ページ A</a></li>
79                <li class="menu-item"><a href="#">ページ B</a></li>
80                <li class="menu-item"><a href="#">ページ C</a></li>
81                <li class="menu-item"><a href="#">ページ D</a></li>
82                <li class="menu-item"><a href="#">ページ E</a></li>
83            </ul>
84        </nav>
85    </header>
86</body>
87</html>

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

回答1件

ベストアンサー

今日、早出なのでぶっつけ本番のやっつけ仕事になってしまい申し訳ありませんが、一応動くようにはなりました。
ただ、ソースが汚いかもなので参考にしてご自身のコードを修正してください。
jQueryはheadの中で先に読み込んでおいた方がいいですよ。ソースもいちいち用意せずgoogleからロードすればいいです。

フォルダ構造やファイル名の指定など時間がなかったので、HTML・CSS・JSが１つのコードになってます。
適宜、切り出して別ファイルにしてください。

追記：改修後の問題の出てるソースを修正したものに書き換えました。これで動作確認お願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ハンバーガーメニュー</title>
8<link rel="stylesheet" href="css/reset.css">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10<style>
11/*PC版メニューのデザイン*/
12body { background-color: #e9967a; }    
13.menu-container { margin: 0; }
14.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
15.menu-container .menu .menu-item { flex: 1; }
16.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; }
17.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; }
18.menu-container .menu .menu-item:last-child a { border-right: none; }
19
20
21@media screen and (max-width: 768px) {
22    /*ハンバーガーアイコン*/
23    .btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; }
24    .btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; }
25    .btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box }
26    .btn-trigger span:nth-of-type(1) { top: 28%; }
27    .btn-trigger span:nth-of-type(2) { top: 50%; }
28    .btn-trigger span:nth-of-type(3) { bottom: 25%; }
29
30    /*閉じるアイコン*/
31    .btn-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); }
32    .btn-trigger.active span:nth-of-type(2) { opacity: 0; }
33    .btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
34
35    /*メニューの中身*/
36    .menu-container .menu { -webkit-transform: translate(-50%, -50%); display: block;/*noneから変更してみました*/ height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; }
37    .menu-container .menu .menu-item a { color:#fff; border-right: none; }
38    .menu-container .menu .menu-item a:hover { background: none; color: #ccc; }
39    .menu-container .menu .menu-item:last-child a { border-bottom: none; }
40
41    /*オーバーレイ →こちらに移動しました*/
42    .modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
43
44    .menu-container { display: none;} 
45
46    .menu-container.active { display: block;}
47}
48</style>
49<script>
50    $(function(){
51    $('.btn-trigger').on('click', function() {
52        if ($('header').hasClass('modal-overlay') == false) {
53            $('header').addClass('modal-overlay');
54            $('header').fadeIn('1500');
55            $('.menu-container .menu').fadeIn('1500');
56            $(this).toggleClass('active');
57            $('.menu-container').toggleClass('active');
58            
59        } else {
60            $('header').removeClass('modal-overlay');
61            $(this).toggleClass('active');
62            $('.menu-container').toggleClass('active');
63        }
64    });
65});
66</script>
67</head>
68
69<body>
70    <header>
71        <div class="icon-hamburger"><span></span></div>
72        <div class="btn-trigger" id="btn02">
73            <span></span>
74            <span></span>
75            <span></span>
76        </div>
77
78        <nav class="menu-container">
79            <ul class="menu">
80                <li class="menu-item"><a href="#">ホーム</a></li>
81                <li class="menu-item"><a href="#">ページ A</a></li>
82                <li class="menu-item"><a href="#">ページ B</a></li>
83                <li class="menu-item"><a href="#">ページ C</a></li>
84                <li class="menu-item"><a href="#">ページ D</a></li>
85                <li class="menu-item"><a href="#">ページ E</a></li>
86            </ul>
87        </nav>
88    </header>
89</body>
90</html>

投稿2020/06/08 22:10

編集2020/06/09 07:55

nekora

総合スコア501

mahou_minarai

2020/06/08 23:32

朝のお忙しいなか、ご丁寧に解答いただきありがとうございます！切り出して確認をしましたところ、願っていた動きです。自分のコードと見比べ勉強させていただきます。本当にありがとうございました！

mahou_minarai

2020/06/09 00:44

nekotoraさま、五月雨式に失礼いたします・・・！ bodyに背景色をつけた際、以下2点の現象が出ていたことが発覚し、引き続きご指導を仰ぎたく存じます。【1】書いていただいたコードでバツボタンでメニューは3本線に戻りますが、メニューの中身が出たままになってしまいます【2】ハンバーガーメニューをクリック後、pc版メニューの横並び配列に戻りません（【1】が影響しているのでしょうか。クリックせず画面幅を伸縮させるとpc/spは出来ているようです）再びお訊ねするのもなぁ・・・と、jsやcssを自分なりに弄ってみましたが、あいにく行き詰まってしまいました。再度ご指導願えますと幸いに存じます。よろしくお願いいたします。

nekora

2020/06/09 00:57

どのようにコードを書いたのでしょう？　質問文は編集・追記できますので、そこに最新のコードを書いてください。仕事の合間になりますが、出来る限りお答えしたいと思います。

mahou_minarai

2020/06/09 02:02

お仕事の合間ということで、重ねて御礼を申し上げます。はじめての質問のため使い方に慣れておらずに大変お恥ずかしい限りです・・・。最新コード追記いたしました。緊急ではございませんので、お時間の許す際にご確認いただけますと幸いでございます。どうぞよろしくお願いいたします！

nekora

2020/06/09 08:21 編集

いただいた最新のソースから修正したものを　改めてソースとして差し替えて記載してあります。動作確認は一応、こちらでは問題ありませんでした。そちらでもチェックお願いします。ちなみに当方　nekora（ねこ＋コアラ）です。まぁどうでもいいですね、失礼しました。

mahou_minarai

2020/06/09 08:50

本当にありがとうございます！！不足分を追加し紐解きながら、おかげさまで何を指示しているのかが少しずつ理解を深めることができました。自力で書けるにはまだまだ程遠いのですが、動くと感動しますね♪ また、お名前間違いを大変失礼いたしました！頭がてんぱっている証拠ですね。。気をつけます。今後も初歩的な質問を投げると思いますが、お目に留まりました際にご指導いただけましたら幸いです。どうぞ引き続きよろしくお願いいたします。この度は本当にありがとうございました！

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