\r\n \r\n ハンバーガーメニュー\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n \"\"\r\n

ハンバーガー

\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n\r\n\r\n```\r\n```css\r\n.container{\r\n max-width: 102.2rem;\r\n margin: 0 auto;\r\n width: 100%;\r\n}\r\n.btn{\r\n color: #fff;\r\n background: blue;\r\n padding: 1.1rem 3.5rem;\r\n border-radius: 1rem;\r\n box-shadow: 0 0.3rem 0.6rem #00000029;\r\n}\r\n.header{\r\n height: 10rem;\r\n box-shadow: 0px 3px 6px #00000029;\r\n color: #333;\r\n position: fixed;\r\n width: 100%;\r\n background-color: #fff;\r\n z-index: 1;\r\n}\r\n\r\n.header-wrapper{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 2.4rem;\r\n\r\n}\r\n.site-title{\r\n display: flex;\r\n align-items: center;\r\n font-size: 2.4rem;\r\n font-weight: bold;\r\n}\r\n.site-title img{\r\n width: 4.7rem;\r\n display: block;\r\n}\r\n.nav-list {\r\n display: flex;\r\n}\r\n.nav-item{\r\n margin-right: 4.6rem;\r\n}\r\n.burger-btn{\r\n display: none;\r\n}\r\n\r\n@media screen and (max-width:768px){\r\n .header{\r\n padding: 0 5%;\r\n }\r\n .burger-btn{\r\n display: block;\r\n width: 39px;\r\n height: 39px;\r\n position: relative;\r\n z-index: 3;\r\n background-color:transparent;\r\n border:none;\r\n }\r\n .bar{\r\n width: 20px;\r\n height: 1px;\r\n display: block;\r\n position: absolute;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color:#1B1310;\r\n }\r\n .bar_top{\r\n top: 10px;\r\n }\r\n .bar_mid{\r\n top: 50%;\r\n transform: translate(-50%,-50%);\r\n }\r\n .bar_bottom{\r\n bottom: 10px;\r\n }\r\n .burger-btn.close .bar_top{\r\n transform: translate(-50%,10px) rotate(45deg);\r\n transition: transform .3s;\r\n }\r\n .burger-btn.close .bar_mid{\r\n opacity: 0;\r\n transition:opacity .3s;\r\n }\r\n .burger-btn.close .bar_bottom{\r\n transform: translate(-50%,-8px) rotate(-45deg);\r\n transition: transform .3s;\r\n }\r\n .nav-wrapper{\r\n display: none;\r\n width: 100vw;\r\n height: 100vh;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 2;\r\n }\r\n .header-nav{\r\n width: 100%;\r\n height: 100%;\r\n background-color:#1B1310;\r\n z-index: 2;\r\n }\r\n .header-nav .nav-list{\r\n display: block;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%,-50%);\r\n text-align: center;\r\n\r\n }\r\n .header-nav .nav-item{\r\n margin-right: 0;\r\n margin-bottom: 40px;\r\n }\r\n body.noscroll{\r\n overflow: hidden;\r\n }\r\n .header-right{\r\n display: none;\r\n }\r\n .header{\r\n display: flex;\r\n width: 100%;\r\n }\r\n \r\n .site-title img{\r\n width: 2.5rem;\r\n }\r\n\r\n}\r\n```\r\n```JQuery\r\n$('.burger-btn').on('click',function(){\r\n $('.burger-btn').toggleClass('close');\r\n $('.header-nav').fadeToggle(500);\r\n $('body').toggleClass('noscroll');\r\n});\r\n\r\n```\r\n### 試したこと\r\n[クリスタさんのサイト](https://crestadesign.org/humbarger/)\r\n「【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方」を参考に作成しましたが、リストが表示されません。","answerCount":1,"upvoteCount":0,"datePublished":"2021-03-10T07:28:08.442Z","dateModified":"2021-03-10T08:08:39.617Z","acceptedAnswer":{"@type":"Answer","text":"とりあえず、こうしてみてはどうでしょうか。\r\n\r\n```js\r\n$('.burger-btn').on('click', function () {\r\n $('.burger-btn').toggleClass('close');\r\n// $('.header-nav').fadeToggle(500);\r\n $('.nav-wrapper').fadeToggle(500);\r\n $('body').toggleClass('noscroll');\r\n});\r\n```\r\n\r\n原因は、親要素が`display:none`となっていることです。子孫要素も非表示になります。\r\n\r\n---\r\n\r\nご参考にされたサイトでも上記のようになっていますね。\r\n[jQueryでクリックイベントを設定しよう | 【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方 | クリ★スタ](https://crestadesign.org/humbarger/#jQuery)\r\n\r\nおそらく、コードを改変しているうちに混乱してしまったことが原因でしょう。\r\n他にも違っている部分があるかもしれませんので、参考元コードとよく比較をされてみてはいかがですか?","dateModified":"2021-03-10T07:54:53.726Z","datePublished":"2021-03-10T07:50:38.199Z","upvoteCount":1,"url":"https://teratail.com/questions/327065#reply-452847"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML5","name":"HTML5に関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/327065","name":"ハンバーガーメニューをクリックしたときに、表示したいリストが表示されない"}}]}}}
質問するログイン新規登録

Q&A

解決済

1回答

1036閲覧

ハンバーガーメニューをクリックしたときに、表示したいリストが表示されない

teratail314

総合スコア2

HTML5

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2021/03/10 07:28

編集2021/03/10 08:08

0

0

引用テキスト### 前提・実現したいこと

(例)HTML,CSS,JQueryでハンバーガーメニューを作ろうとしています。
ハンバーガーメニューをクリックした時に表示したいリスト(特徴、価格、お問合せ)が表示されないので困っております。以下に試してみたソースコードを添付します。sliderを読み込んでいますが、これはmainタグ内で使っているもので、今回、mainタグ内は質問内容に関係ないものだと思い、省略しています。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="robots" content="noindex"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="./css/reset.css"> 9 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 10 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> 11 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 12 <link rel="stylesheet" href="./css/style.css"> 13 <title>ハンバーガーメニュー</title> 14</head> 15<body> 16 <header class="header"> 17 <div class="container "> 18 <div class="header-wrapper"> 19 <div class="site-title"> 20 <img src="./img/logo.png" alt=""> 21 <h1 style="margin-left: 1.6rem;">ハンバーガー</h1> 22 </div> 23 <div class="nav-wrapper"> 24 <nav class="header-nav"> 25 <ul class="nav-list"> 26 <li class="nav-item"><a href="#feature">特徴</a></li> 27 <li class="nav-item"><a href="#price">価格</a></li> 28 <li class="nav-item"><a href="#contact">お問合わせ</a></li> 29 </ul> 30 </nav> 31 </div> 32 <div class="header-right"> 33 <a href="#contact"><button class="btn"> お問い合わせ</button></a> 34 </div> 35 <div class="burger-btn"><!-- ③ハンバーガーボタン --> 36 <span class="bar bar_top"></span> 37 <span class="bar bar_mid"></span> 38 <span class="bar bar_bottom"></span> 39 </div> 40 </div> 41 </div> 42 </header> 43 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 44 <script src="./js/script.js"></script> 45</body> 46</html>

css

1.container{ 2 max-width: 102.2rem; 3 margin: 0 auto; 4 width: 100%; 5} 6.btn{ 7 color: #fff; 8 background: blue; 9 padding: 1.1rem 3.5rem; 10 border-radius: 1rem; 11 box-shadow: 0 0.3rem 0.6rem #00000029; 12} 13.header{ 14 height: 10rem; 15 box-shadow: 0px 3px 6px #00000029; 16 color: #333; 17 position: fixed; 18 width: 100%; 19 background-color: #fff; 20 z-index: 1; 21} 22 23.header-wrapper{ 24 display: flex; 25 justify-content: space-between; 26 align-items: center; 27 padding-top: 2.4rem; 28 29} 30.site-title{ 31 display: flex; 32 align-items: center; 33 font-size: 2.4rem; 34 font-weight: bold; 35} 36.site-title img{ 37 width: 4.7rem; 38 display: block; 39} 40.nav-list { 41 display: flex; 42} 43.nav-item{ 44 margin-right: 4.6rem; 45} 46.burger-btn{ 47 display: none; 48} 49 50@media screen and (max-width:768px){ 51 .header{ 52 padding: 0 5%; 53 } 54 .burger-btn{ 55 display: block; 56 width: 39px; 57 height: 39px; 58 position: relative; 59 z-index: 3; 60 background-color:transparent; 61 border:none; 62 } 63 .bar{ 64 width: 20px; 65 height: 1px; 66 display: block; 67 position: absolute; 68 left: 50%; 69 transform: translateX(-50%); 70 background-color:#1B1310; 71 } 72 .bar_top{ 73 top: 10px; 74 } 75 .bar_mid{ 76 top: 50%; 77 transform: translate(-50%,-50%); 78 } 79 .bar_bottom{ 80 bottom: 10px; 81 } 82 .burger-btn.close .bar_top{ 83 transform: translate(-50%,10px) rotate(45deg); 84 transition: transform .3s; 85 } 86 .burger-btn.close .bar_mid{ 87 opacity: 0; 88 transition:opacity .3s; 89 } 90 .burger-btn.close .bar_bottom{ 91 transform: translate(-50%,-8px) rotate(-45deg); 92 transition: transform .3s; 93 } 94 .nav-wrapper{ 95 display: none; 96 width: 100vw; 97 height: 100vh; 98 position: fixed; 99 top: 0; 100 left: 0; 101 z-index: 2; 102 } 103 .header-nav{ 104 width: 100%; 105 height: 100%; 106 background-color:#1B1310; 107 z-index: 2; 108 } 109 .header-nav .nav-list{ 110 display: block; 111 position: absolute; 112 top: 50%; 113 left: 50%; 114 transform: translate(-50%,-50%); 115 text-align: center; 116 117 } 118 .header-nav .nav-item{ 119 margin-right: 0; 120 margin-bottom: 40px; 121 } 122 body.noscroll{ 123 overflow: hidden; 124 } 125 .header-right{ 126 display: none; 127 } 128 .header{ 129 display: flex; 130 width: 100%; 131 } 132 133 .site-title img{ 134 width: 2.5rem; 135 } 136 137}

JQuery

1$('.burger-btn').on('click',function(){ 2 $('.burger-btn').toggleClass('close'); 3 $('.header-nav').fadeToggle(500); 4 $('body').toggleClass('noscroll'); 5}); 6

試したこと

クリスタさんのサイト
「【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方」を参考に作成しましたが、リストが表示されません。

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

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

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

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

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

K_3578

2021/03/10 07:34

teratailではURLは「リンクの挿入」を押して出てくる形[リンク先の内容](URL) で提示してください。質問は編集できますので。
teratail314

2021/03/10 07:59

返信ありがとうございます。リンクの挿入をしました。
K_3578

2021/03/10 08:01

@質問者さん 編集有難いのですがリンク2重になってるのでそれだけ消しといてくれるともっと助かります・・・。
guest

回答1

0

ベストアンサー

とりあえず、こうしてみてはどうでしょうか。

js

1$('.burger-btn').on('click', function () { 2 $('.burger-btn').toggleClass('close'); 3// $('.header-nav').fadeToggle(500); 4 $('.nav-wrapper').fadeToggle(500); 5 $('body').toggleClass('noscroll'); 6});

原因は、親要素がdisplay:noneとなっていることです。子孫要素も非表示になります。


ご参考にされたサイトでも上記のようになっていますね。
jQueryでクリックイベントを設定しよう | 【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方 | クリ★スタ

おそらく、コードを改変しているうちに混乱してしまったことが原因でしょう。
他にも違っている部分があるかもしれませんので、参考元コードとよく比較をされてみてはいかがですか?

投稿2021/03/10 07:50

編集2021/03/10 07:54
Lhankor_Mhy

総合スコア37634

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

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

teratail314

2021/03/10 08:23

教えていただいた通りコードを書いたところ、リストが表示されました!助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問