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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1357閲覧

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

mahou_minarai

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/08 13:55

編集2020/06/09 01:58

実行したいこと

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

最近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>

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

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

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

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問