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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

13027閲覧

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

ayaaaaa

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/10 14:46

編集2020/05/10 14:55

前提・実現したいこと

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

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

スマホ表示 実装サンプル 右上にボタンがあるタイプ :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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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> <!--jqueryCDN--> <script type="text/javascript" src="lib/hamburger.js"></script><!--hamburger.js読み込み--> </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><!--inner--> </nav> <div class="toggle_btn"> <span></span> <span></span> <span></span> </div> <div id="mask"></div> </div> <!--flexbox--> </div> <!--header-inner--> </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を実行してしまうのでうまくいかないです。 解決策は2通りあります。 ①以下1行の読み込みを、</body>直前に移動する。(htmlが諸々読まれた実行) <script type="text/javascript" src="lib/hamburger.js"></script><!--hamburger.js読み込み--> ②javascript内で明示的に「htmlが読み込まれたら実行」を記述する。 lib/hamburger.js内のスクリプトをまるっと以下の中に入れてください。 $(document).ready(function(){ //ここにhamburger.jsのスクリプト全てコピペ移動 });
ayaaaaa

2020/05/12 07:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問