ハンバーガーメニューが反応しない

前提・実現したいこと

初心者です。
スマホ表示の際にハンバーガーメニューを表示させるようにしたのですが、ハンバーガーメニューのアイコンをクリックしても反応しません。どこを修正したら良いのか分からないため、どなたかご教授頂けると助かります。

※下記のサイトを参考にして制作しました。

スマホ表示　実装サンプル右上にボタンがあるタイプ :https://125naroom.com/web/2958
PC表示:https://kutarosan.com/header-flex/#codepen

該当のソースコード

HTML
1<header class="header">
2  <div class="header-inner" div id="navArea">
3    <div class="flexbox">
4      <nav class="nav-global">
5	  <div class="inner">
6        <ul class="flexbox">
7          <li><a href="#MESSAGE">MESSAGE</a></li>
8          <li><a href="#WORKS">WORKS</a></li>
9          <li><a href="#PROFILE">PROFILE</a></li>
10          <li><a href="#SKILL">SKILL</a></li>
11          <li><a href="#CAREER">CAREER</a></li>
12          <li><a href="#CONTACT">CONTACT</a></li>
13        </ul>
14	  </div><!--inner-->
15	  </nav>
16	  <div class="toggle_btn">
17       <span></span>
18       <span></span>
19       <span></span>
20  	  </div>
21      <div id="mask"></div>
22    </div> <!--flexbox-->
23  </div> <!--header-inner--> 
24</header>

CSS
1/*PC表示 ナビゲーション*/
2header {
3  align-items: center;
4  background: #ffffff;
5  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
6  display: flex;
7  padding: 2.8rem 0;
8}
9 
10header .header-inner{
11  margin: auto;
12  max-width: 100%;
13  width: 1920px;
14}
15
16header .flexbox {
17  align-items: center;
18  display: flex;
19  justify-content: center;
20}
21.nav-global ul {
22  list-style :none;
23}
24.nav-global li {
25  margin: 0 15px;
26}
27.nav-global li:last-child {
28  margin-right: 0;
29}
30.nav-global a {
31  color: #C8002E;
32  text-decoration: none;
33  font-size: 1.6rem;
34  font-weight: bold;
35  letter-spacing: 0.1em;
36}
37/*スマホ560px未満　ハンバーガーメニュー*/
38@media (max-width: 559px){
39
40.nav-global {
41	display: none;
42}
43/*============
44nav
45=============*/
46.nav-global {
47  display: block;
48  position: fixed;
49  top: 0;
50  left: -300px;
51  bottom: 0;
52  width: 300px;
53  background: #ffffff;
54  overflow-x: hidden;
55  overflow-y: auto;
56  -webkit-overflow-scrolling: touch;
57  transition: all .5s;
58  z-index: 3;
59  opacity: 0;
60}
61.open .nav-global {
62  left: 0;
63  opacity: 1;
64}
65.nav-global .inner {
66  padding: 25px;
67}
68.nav-global .inner ul {
69  list-style: none;
70  margin: 0;
71  padding: 0;
72}
73.nav-global .inner ul li {
74  position: relative;
75  margin: 0;
76  border-bottom: 1px solid #333;
77}
78.nav-global .inner ul li a {
79  display: block;
80  color: #333;
81  font-size: 14px;
82  padding: 1em;
83  text-decoration: none;
84  transition-duration: 0.2s;
85}
86.nav-global .inner ul li a:hover {
87  background: #e4e4e4;
88}
89@media screen and (max-width: 767px) {
90  nav {
91    left: -220px;
92    width: 220px;
93  }
94}
95/*============
96.toggle_btn
97=============*/
98.toggle_btn {
99  display: block;
100  position: fixed;
101  right: 30px;
102  width: 30px;
103  height: 30px;
104  transition: all .5s;
105  cursor: pointer;
106  z-index: 3;
107}
108.toggle_btn span {
109  display: block;
110  position: absolute;
111  left: 0;
112  width: 30px;
113  height: 2px;
114  background-color: #000000;
115  border-radius: 4px;
116  transition: all .5s;
117}
118.toggle_btn span:nth-child(1) {
119  top: 4px;
120}
121.toggle_btn span:nth-child(2) {
122  top: 14px;
123}
124.toggle_btn span:nth-child(3) {
125  bottom: 4px;
126}
127.open .toggle_btn span {
128  background-color: #fff;
129}
130.open .toggle_btn span:nth-child(1) {
131  -webkit-transform: translateY(10px) rotate(-315deg);
132  transform: translateY(10px) rotate(-315deg);
133}
134.open .toggle_btn span:nth-child(2) {
135  opacity: 0;
136}
137.open .toggle_btn span:nth-child(3) {
138  -webkit-transform: translateY(-10px) rotate(315deg);
139  transform: translateY(-10px) rotate(315deg);
140}
141/*============
142#mask
143=============*/
144#mask {
145  display: none;
146  transition: all .5s;
147}
148.open #mask {
149  display: block;
150  position: fixed;
151  top: 0;
152  left: 0;
153  width: 100%;
154  height: 100%;
155  background: #000;
156  opacity: .8;
157  z-index: 2;
158  cursor: pointer;
159}
160}

jquery
1(function($) {
2  var $nav   = $('#navArea');
3  var $btn   = $('.toggle_btn');
4  var $mask  = $('#mask');
5  var open   = 'open'; // class
6  // menu open close
7  $btn.on( 'click', function() {
8    if ( ! $nav.hasClass( open ) ) {
9      $nav.addClass( open );
10    } else {
11      $nav.removeClass( open );
12    }
13  });
14  // mask close
15  $mask.on('click', function() {
16    $nav.removeClass( open );
17  });
18} )(jQuery);

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

回答1件

ベストアンサー

jquery読み込んでないのかと思います。
ayaaaaaさんの書いてるjqueryコード（<script></script>）より前に、以下記載すると動くと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

投稿2020/05/10 15:57

omori3

総合スコア274

ayaaaaa

2020/05/11 13:06

回答ありがとうございます。jqueryコードを入れたのですが、変化無しでした。他に考えられる原因はありますか？お手数をおかけしますがよろしくお願いいたします。 ◎HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトルタイトル</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script type="text/javascript" src="lib/hamburger.js"></script> </head> <body> <header class="header"> <div class="header-inner" div id="navArea"> <div class="flexbox"> <nav class="nav-global"> <div class="inner"> <ul class="flexbox"> <li><a href="#MESSAGE">MESSAGE</a></li> <li><a href="#WORKS">WORKS</a></li> <li><a href="#PROFILE">PROFILE</a></li> <li><a href="#SKILL">SKILL</a></li> <li><a href="#CAREER">CAREER</a></li> <li><a href="#CONTACT">CONTACT</a></li> </ul> </div> </nav> <div class="toggle_btn"> <span></span> <span></span> <span></span> </div> <div id="mask"></div> </div>  </div>  </header> <section class="MESSAGE" id="MESSAGE"> </section> <section class="WORKS" id="WORKS"> </section> <section class="PROFILE" id="PROFILE"> </section> <section class="SKILL" id="SKILL"> </section> <section class="CAREER" id="CAREER"> </section> <section class="CONTACT" id="CONTACT"> </section> <footer class="footer"> </footer> </body> </html>

omori3

2020/05/11 13:19

javascriptの実行のタイミングですね。現状</head>の直前にlib/hamburger.jsを読み込んでいますが、これだと、<body>以下が読み込まれる前にjsを実行してしまうのでうまくいかないです。解決策は２通りあります。 ①以下１行の読み込みを、</body>直前に移動する。（htmlが諸々読まれた実行） <script type="text/javascript" src="lib/hamburger.js"></script> ②javascript内で明示的に「htmlが読み込まれたら実行」を記述する。 lib/hamburger.js内のスクリプトをまるっと以下の中に入れてください。 $(document).ready(function(){ //ここにhamburger.jsのスクリプト全てコピペ移動 });

ayaaaaa

2020/05/12 07:25

①の方法を試したら上手くいきました。ご協力いただきありがとうございました！

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