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

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

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

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

HTML5

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

374閲覧

jQueryを使ったハンバーガ–メニューが表示されない

kyohaya

総合スコア20

CSS3

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

HTML5

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/01 03:48

イメージ説明
ハンバーガーメニューを↑と表示させたいのですが↓になりました。
イメージ説明

2枚目のhtmlとcssとjQueryは↓です。

<!doctype html> <html lang="ja"> <head> <!--メディアクエリ--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--reset.css--> <link rel="stylesheet" href="reset.css"> <!--css--> <link rel="stylesheet" href="css/stylesheet.css"> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <!--fontawesome--> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="exercise.js"></script> <title>top</title> </head> <html> <header> <div class="menu"> </div><!--/.menu--> <img class="header-img img1" src="images/top1.jpg" width="1920px" height="900px" alt="top1"> <div class="logo"> <p>PAS-POL</p> <p>旅のモノづくりブランド</p> </div><!--/.logo--> <nav class="globalMenuSp"> <ul class="navi"> <li><a href="top.html">TOP</a></li> <li><a href="product.html">PRODUCT</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="news.html">NEWS</a></li> <li><a href="contact.html">CONTACT</a></li> </ul><!--/.navi--> </nav> <div class="navToggle"> <span></span><span></span><span></span><span>menu</span> </div> </header> </div> </html>
/*共通部分*/ body{ margin:0; } li{ list-style:none; } .container{ max-width:850px; margin:0 auto; } a{ text-decoration:none; color:#fff; } /*ヘッダー*/ header{ height:900px; margin:auto; color:#fff; position:relative; } .menu{ padding:10px 0 10px 10px; font-size:15px; background-color:#fff; height:100px; } .menu p{ margin-top:0; } header .navi{ position:absolute; top:30px; right:30px; } header .logo{ position:absolute; top:30px; left:30px; } .header-img { display: block; margin:auto; } .img1 { position: absolute; top: 0; left: 0; right: 0; width:100%; } .logo p:first-child{ margin-top:0; font-size:30px; font-weight:bold; } .logo p:nth-child(2){ font-size:10px; } .logo p:nth-child(2){ display:inline-block; } .logo{ margin-left:89px; margin-top:29px; } header .navi{ display:flex; margin-top:49px; margin-right:16px; } header li{ margin-left:95px; } .navi li:hover{ border-bottom:2px solid #fff; padding-bottom:5px; } /*メディアクエリ スマホ*/ @media(max-width:559px){ /*ヘッダー*/ .header-img { overflow:hidden; } .img1,.img14,.img15,.img16,.img17 { top: 400px; } .menu p{ color:#13191B; } header .logo{ position:absolute; left:100px; top:200px; } header .navi{ display:none; } .logo p:first-child{ font-size:40px; margin-bottom:0; } .logo p:nth-child(2){ font-size:10px; margin-left:30px; } .menu{ height:80px; background-color:#fff; } /*ハンバーガーメニュー*/ nav.globalMenuSp { position: fixed; z-index: 2; top: 0; left: 0; background: #fff; color: #000; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 100%; } nav.globalMenuSp ul { background: #ccc; margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { font-size: 1.1em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #333; } /* 最後はラインを描かない */ nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li a { display: block; color: #000; padding: 1em 0; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { transform: translateY(0%); } .navToggle { display: block; position: fixed; /* bodyに対しての絶対位置指定 */ right: 13px; top: 12px; width: 42px; height: 51px; cursor: pointer; z-index: 3; background: #666; text-align: center; } .navToggle span { display: block; position: absolute; /* .navToggleに対して */ width: 30px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px; } .navToggle span:nth-child(1) { top: 9px; } .navToggle span:nth-child(2) { top: 18px; } .navToggle span:nth-child(3) { top: 27px; } .navToggle span:nth-child(4) { border: none; color: #eee; font-size: 9px; font-weight: bold; top: 34px; } /* 最初のspanをマイナス45度に */ .navToggle.active span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } }
$(function() { $('.navToggle').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); });

2枚目の画像のコードをどう変えれば1枚目の画像のようにメニューが表示されるのでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

.active クラスが付与されたときにナビゲーションを表示するように CSS や JavaScript で display プロパティの値を制御をし、そこに適宜装飾を付け加えれば良いです。たとえば、以下のような方法が考えられます。

CSS

1.globalMenuSp.active>.navi { /* 追記 */ 2 display: flex; 3 flex-direction: column; 4 top: 0; 5 right: 0; 6} 7 8.globalMenuSp.active li { /* 追記 */ 9 margin-left: 0; 10}

以上より、最終的なコードは以下のようになり、質問文の画像のように動作していることが確認出来ます (動作確認用リンク)。

HTML

1<!doctype html> 2<html lang="ja"> 3 4 <head> 5 <!--メディアクエリ--> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 <!--reset.css--> 11 <link rel="stylesheet" href="reset.css"> 12 <!--css--> 13 <link rel="stylesheet" href="css/stylesheet.css"> 14 <link href="stylesheet.css" rel="stylesheet" type="text/css"> 15 <!--fontawesome--> 16 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 17 <!--jQuery--> 18 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 19 <script type="text/javascript" src="exercise.js"></script> 20 <title>top</title> 21 </head> 22 23 <body> 24 <header> 25 <div class="menu"> 26 27 </div> 28 <!--/.menu--> 29 <img class="header-img img1" src="https://placehold.jp/3d4070/ffffff/1920x900.png?text=images/top1.jpg" width="1920px" height="900px" alt="top1"> 30 31 <div class="logo"> 32 <p>PAS-POL</p> 33 <p>旅のモノづくりブランド</p> 34 </div> 35 <!--/.logo--> 36 <nav class="globalMenuSp"> 37 <ul class="navi"> 38 <li><a href="top.html">TOP</a></li> 39 <li><a href="product.html">PRODUCT</a></li> 40 <li><a href="about.html">ABOUT</a></li> 41 <li><a href="news.html">NEWS</a></li> 42 <li><a href="contact.html">CONTACT</a></li> 43 </ul> 44 <!--/.navi--> 45 </nav> 46 <div class="navToggle"> 47 <span></span><span></span><span></span><span>menu</span> 48 </div> 49 </header> 50 </body> 51 52</html> 53

CSS

1/*共通部分*/ 2body { 3 margin: 0; 4} 5 6li { 7 list-style: none; 8} 9 10.container { 11 max-width: 850px; 12 margin: 0 auto; 13} 14 15a { 16 text-decoration: none; 17 color: #fff; 18} 19 20/*ヘッダー*/ 21header { 22 height: 900px; 23 margin: auto; 24 color: #fff; 25 position: relative; 26} 27 28.menu { 29 padding: 10px 0 10px 10px; 30 font-size: 15px; 31 background-color: #fff; 32 height: 100px; 33} 34 35.menu p { 36 margin-top: 0; 37} 38 39header .navi { 40 position: absolute; 41 top: 30px; 42 right: 30px; 43} 44 45header .logo { 46 position: absolute; 47 top: 30px; 48 left: 30px; 49} 50 51.header-img { 52 display: block; 53 margin: auto; 54} 55 56.img1 { 57 position: absolute; 58 top: 0; 59 left: 0; 60 right: 0; 61 width: 100%; 62 63 64} 65 66.logo p:first-child { 67 margin-top: 0; 68 font-size: 30px; 69 font-weight: bold; 70} 71 72.logo p:nth-child(2) { 73 font-size: 10px; 74} 75 76.logo p:nth-child(2) { 77 display: inline-block; 78} 79 80.logo { 81 margin-left: 89px; 82 margin-top: 29px; 83} 84 85header .navi { 86 display: flex; 87 margin-top: 49px; 88 margin-right: 16px; 89} 90 91header li { 92 margin-left: 95px; 93} 94 95.navi li:hover { 96 border-bottom: 2px solid #fff; 97 padding-bottom: 5px; 98} 99 100/*メディアクエリ スマホ*/ 101@media(max-width:559px) { 102 103 /*ヘッダー*/ 104 .header-img { 105 overflow: hidden; 106 } 107 108 .img1, 109 .img14, 110 .img15, 111 .img16, 112 .img17 { 113 top: 400px; 114 } 115 116 .menu p { 117 color: #13191B; 118 } 119 120 header .logo { 121 position: absolute; 122 left: 100px; 123 top: 200px; 124 } 125 126 header .navi { 127 display: none; 128 } 129 130 .logo p:first-child { 131 font-size: 40px; 132 margin-bottom: 0; 133 } 134 135 .logo p:nth-child(2) { 136 font-size: 10px; 137 margin-left: 30px; 138 } 139 140 .menu { 141 height: 80px; 142 background-color: #fff; 143 } 144 145 146 /*ハンバーガーメニュー*/ 147 148 nav.globalMenuSp { 149 position: fixed; 150 z-index: 2; 151 top: 0; 152 left: 0; 153 background: #fff; 154 color: #000; 155 text-align: center; 156 transform: translateY(-100%); 157 transition: all 0.6s; 158 width: 100%; 159 } 160 161 nav.globalMenuSp ul { 162 background: #ccc; 163 margin: 0 auto; 164 padding: 0; 165 width: 100%; 166 } 167 168 nav.globalMenuSp ul li { 169 font-size: 1.1em; 170 list-style-type: none; 171 padding: 0; 172 width: 100%; 173 border-bottom: 1px dotted #333; 174 } 175 176 /* 最後はラインを描かない */ 177 nav.globalMenuSp ul li:last-child { 178 padding-bottom: 0; 179 border-bottom: none; 180 } 181 182 nav.globalMenuSp ul li a { 183 display: block; 184 color: #000; 185 padding: 1em 0; 186 } 187 188 /* このクラスを、jQueryで付与・削除する */ 189 nav.globalMenuSp.active { 190 transform: translateY(0%); 191 } 192 193 .navToggle { 194 display: block; 195 position: fixed; 196 /* bodyに対しての絶対位置指定 */ 197 right: 13px; 198 top: 12px; 199 width: 42px; 200 height: 51px; 201 cursor: pointer; 202 z-index: 3; 203 background: #666; 204 text-align: center; 205 } 206 207 .navToggle span { 208 display: block; 209 position: absolute; 210 /* .navToggleに対して */ 211 width: 30px; 212 border-bottom: solid 3px #eee; 213 -webkit-transition: .35s ease-in-out; 214 -moz-transition: .35s ease-in-out; 215 transition: .35s ease-in-out; 216 left: 6px; 217 } 218 219 .navToggle span:nth-child(1) { 220 top: 9px; 221 } 222 223 .navToggle span:nth-child(2) { 224 top: 18px; 225 } 226 227 .navToggle span:nth-child(3) { 228 top: 27px; 229 } 230 231 .navToggle span:nth-child(4) { 232 border: none; 233 color: #eee; 234 font-size: 9px; 235 font-weight: bold; 236 top: 34px; 237 } 238 239 /* 最初のspanをマイナス45度に */ 240 .navToggle.active span:nth-child(1) { 241 top: 18px; 242 left: 6px; 243 -webkit-transform: rotate(-45deg); 244 -moz-transform: rotate(-45deg); 245 transform: rotate(-45deg); 246 } 247 248 /* 2番目と3番目のspanを45度に */ 249 .navToggle.active span:nth-child(2), 250 .navToggle.active span:nth-child(3) { 251 top: 18px; 252 -webkit-transform: rotate(45deg); 253 -moz-transform: rotate(45deg); 254 transform: rotate(45deg); 255 } 256 257 .globalMenuSp.active>.navi { 258 /* 追記 */ 259 display: flex; 260 flex-direction: column; 261 top: 0; 262 right: 0; 263 } 264 265 .globalMenuSp.active li { 266 /* 追記 */ 267 margin-left: 0; 268 } 269 270}

jQuery

1$(function() { 2 $('.navToggle').click(function() { 3 $(this).toggleClass('active'); 4 5 if ($(this).hasClass('active')) { 6 $('.globalMenuSp').addClass('active'); 7 } else { 8 $('.globalMenuSp').removeClass('active'); 9 } 10 }); 11});

投稿2020/02/01 04:07

s8_chu

総合スコア14731

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

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

kyohaya

2020/02/01 05:22

丁寧な回答ありがとうございます。 解決できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問