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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

2591閲覧

レスポンシブでドロワーメニューを作りましたが、ボタンを押してもメニューが出てきません。

Kuriaki

総合スコア85

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/06/05 06:00

現在レスポンシブで小画面の時にヘッダーのメニューバーをドロワーメニューにしたいですが、うまく行きません。
ボタンをクリックしても、メニューが表示しません。
コードを貼ります。
回答宜しくお願いいたします。

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>SSG</title> 6<meta name="viewport" content="windows=device-width"> 7<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> 8<link rel="stylesheet" href="./common/reset.css"> 9<link rel="stylesheet" href="./common/style.css"> 10 11<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 12<script> 13$(function)(){ 14 15 $("#menubtn").click(function(){ 16 $("#menu").slideToggle(); 17 }); 18}); 19</script> 20</head> 21<body> 22<div class="boxA"> 23<div class="boxA-inner"> 24 <div class="box1"> 25 <div class="site"> 26 <h1><a href="#">LongZhu</a></h1> 27 </div><!-- site --> 28 </div> 29 30 <div class="box2"> 31 32 <button type="button" id="menubtn"> 33 <i class="fa fa-bars"></i><span>MENU</span> 34 </button> 35 36 <nav class="menu" id="menu"> 37 <ul> 38 <li><a href="#">トップ</a></li> 39 <li><a href="#">沿革</a></li> 40 <li><a href="#">メンバー紹介</a></li> 41 <li><a href="#">採用情報</a></li> 42 <li><a href="#">お問い合わせ</a></li> 43 </ul> 44 </nav> 45 </div> 46</div><!-- boxA-inner --> 47</div><!-- boxA --> 48 49<div class="box3"> 50<div class="top"> 51<img src="./common/img/main.jpg" class="topimg"> 52<p class="catch">LongZhuはデータの蓄積と<br> 53分析・解析のサービスを提供します。</p> 54 55</div> 56 57</div> 58 59<div class="box6"> 60<div class="box6-1"> 61<div class="gaiyou"> 62 <a href="#"> 63 <i class="fa fa-database"></i> 64 <h1>データの分析・解析</h1> 65 <p>目的に応じてさまざまな角度から<br> 66 データを分析・解析します。</p> 67 </a> 68</div> 69</div><!-- box6-1 --> 70 71<div class="box6-2"> 72<div class="gaiyou"> 73 <a href="#"> 74 <i class="fa fa-bar-chart-o"></i> 75 <h1>わかりやすく視覚化</h1> 76 <p>解析結果はわかりやすく視覚化し、<br> 77 活用できるようにします。</p> 78 </a> 79</div> 80</div><!-- box6-2 --> 81 82<div class="box6-3"> 83<div class="gaiyou"> 84 <a href="#"> 85 <i class="fa fa-envelope"></i> 86 <h1>24時間サポート</h1> 87 <p>24時間サポートでトラブルにも<br> 88 素早く対応します。</p> 89 </a> 90</div> 91</div><!-- box6-3 --> 92</div> 93<div class="box4"> 94<div class="box4-1"> 95 96 <div class="news"> 97 <h1>お知らせ</h1> 98 <ul> 99 <li><a href="#"> 100 <time datetime="2017-06-01">06/01</time> 101 <div class="text">データセンターのメンテナンスを行います。</div> 102 </a></li> 103 <li><a href="#"> 104 <time datetime="2017-06-02">06/02</time> 105 <div class="text">Android版アプリ バージョン1.2をリリースしました。</div> 106 </a></li> 107 <li><a href="#"> 108 <time datetime="2017-06-03">06/03</time> 109 <div class="text">セミナー開催に伴うキャンペーンのお知らせ。</div> 110 </a></li> 111 <li><a href="#"> 112 <time datetime="2017-06-04">06/04</time> 113 <div class="text">グラフ表示の切替方法がわかりやすくなりました。</div> 114 </a></li> 115 </ul> 116 </div> 117 </div><!-- box4-1 --> 118 119<div class="box4-2"> 120 <div class="follow"> 121 <p class="follow-info">最新情報はこちらでも配信しています</p> 122 <ul> 123 <li><a href="#" class="follow-tw"> 124 <i class="fa fa-fw fa-twitter"></i> 125 Twitter 126 </a></li> 127 <li><a href="#" class="follow-fb"> 128 <i class="fa fa-fw fa-facebook"></i> 129 Facebook 130 </a></li> 131 <li><a href="#" class="follow-gp"> 132 <i class="fa fa- fw fa-google-plus"></i> 133 Google+ 134 </a></li> 135 </ul> 136 </div> 137</div> 138</div><!-- box4 --> 139 140 141<div class="box5"> 142<div class="box5-inner"> 143 <div class="copyright"> 144 <p>copyright &copy; LongZhu</p> 145 </div> 146</div><!-- box5-inner --> 147</div> 148 149 150 151 152</body> 153</html>

css

1@charset "UTF-8" 2 3 4body{ 5 font-family: 'メイリオ', 6 'Hiragino Kaku Gothic Pro', sans-serif; 7 margin: 0; 8} 9 10.site h1 a{ 11 color:#ffffff; 12 text-decoration:none; 13 font-size: 36px; 14} 15 16.site h1{ 17 margin:0; 18 font-size:30px; 19} 20 21 22 23.topimg{ 24 width: 100%; 25 height: auto; 26 vertical-align: bottom; 27} 28 29.catch{ 30 margin:0; 31 padding: 15px; 32 background-color: rgba(255,255,255,0.7); 33 font-size: 28px; 34 position: absolute; 35 bottom:7%; 36 left: 3%; 37} 38 39.top{ 40 position: relative; 41} 42 43 44.gaiyou a{ 45 display: block; 46 background-color: #222222; 47 color: #ffffff; 48 text-align: center; 49 text-decoration: none; 50} 51 52.gaiyou a:hover{ 53 opacity: 0.8; 54} 55 56.gaiyou i{ 57 display: block; 58 padding-top: 40px; 59 padding-bottom: 40px; 60 font-size: 38px; 61} 62 63.gaiyou .fa-database{ 64 background-color: #bfbd13; 65} 66 67.gaiyou .fa-bar-chart-o{ 68 background-color: #c58839; 69} 70 71.gaiyou .fa-envelope{ 72 background-color: #859f46; 73} 74 75.gaiyou h1{ 76 margin-top: 0; 77 margin-bottom: 0; 78 padding-top: 5px; 79 padding-bottom: 5px; 80 font-size: 20px; 81 font-weight: normal; 82} 83 84.gaiyou p{ 85 margin-top: 0; 86 margin-bottom: 0; 87 padding-top: 15px; 88 padding-bottom: 15px; 89 background-color: #524e3c; 90 font-size: 12px; 91} 92 93.news{ 94 padding: 20px; 95 border:solid 5px #dddddd; 96 97} 98 99.news h1{ 100 margin-top:0; 101 margin-bottom: 5px; 102 font-size: 18px; 103 color: #666666; 104} 105 106.news ul{ 107 margin: 0; 108 padding: 0; 109 list-style: none; 110} 111 112.news li a{ 113 display: block; 114 padding: 5px; 115 border-bottom: dotted 2px #dddddd; 116 color: #000000; 117 font-size: 14px; 118 text-decoration: none; 119} 120 121.news li a:hover{ 122 background-color: #eeeeee; 123} 124 125.news time{ 126 color: #888888; 127 font-weight: bold; 128 float: none; 129 width: auto; 130 131} 132 133 134 135.news .text{ 136 float: none; 137 width: auto; 138} 139 140.follow ul{ 141 margin: 0; 142 padding:0; 143 list-style: none; 144} 145 146.follow li a{ 147 display: block; 148 margin-bottom: 10px; 149 padding: 10px; 150 border-radius: 4px; 151 color: #ffffff; 152 font-size: 14px; 153 text-decoration: none; 154} 155 156.follow li a:hover{ 157 opacity:0.8; 158} 159 160.follow-tw{ 161 background-color: #63bafb; 162} 163 164.follow-fb{ 165 background-color: #5288f7; 166} 167 168.follow-gp{ 169 background-color: #f65d4a; 170} 171 172.follow i{ 173 margin-right: 10px; 174 font-size:24px; 175 vertical-align: middle; 176} 177 178.follow p{ 179 margin-top: 20px; 180 margin-bottom:20px; 181 padding:20px; 182 background-color: #dddddd; 183 font-size: 14px; 184 text-align: center; 185} 186 187.follow-info{ 188 position: relative; 189 background-image: #dddddd; 190} 191 192.follow-info:after{ 193 top: 100%; 194 left: 50%; 195 border:solid transparent; 196 content: ""; 197 height: 0; 198 width: 0; 199 position: absolute; 200 pointer-events:none; 201 border-color: rgba(221,221,221,0); 202 border-top-color: #dddddd; 203 border-width: 15px; 204 margin-left: -15px; 205} 206 207.copyright{ 208 margin: 0; 209 color: #666666; 210 font-size: 14px; 211} 212 213.box5{ 214 padding-top: 15px; 215 padding-bottom: 15px; 216 background-color: #dddddd; 217} 218 219.boxA,.box4,.box5,.box6{ 220 padding-left: 15px; 221 padding-right: 15px; 222} 223 224.boxA{ 225 background-color: #333333; 226 padding-top: 20px; 227 padding-bottom: 10px; 228} 229 230.box4{ 231 padding-bottom: 20px; 232} 233 234.box4-1{ 235 padding-bottom: 20px; 236 padding-top: 20px; 237} 238 239.box6{ 240 padding-top: 20px; 241} 242.box6-1,.box6-2,.box6-3{ 243 padding-bottom: 10px; 244} 245 246 247 248 249/* ################ 1190px以上 ####################*/ 250@media(min-width:1190px){ 251.box3,.box4,.boxA-ineer,.box5-inner,.box6{ 252 width: 1140px; 253 margin-left: auto; 254 margin-right: auto; 255} 256 257} 258 259 260/* ################ 768px以上 ####################*/ 261@media(min-width:768px){ 262 263#menubtn{ 264 display: none; 265} 266 267#menu{ 268 display: block !important; 269} 270 271.menu ul{ 272 margin: 0; 273 padding: 0; 274 list-style:none; 275} 276 277.menu li a{ 278 display: block; 279 padding: 10px 15px; 280 color: #ffffff; 281 font-size: 14px; 282 text-decoration: none; 283} 284 285.menu li a:hover{ 286 background-color: #524e3c; 287} 288 289.menu ul:after{ 290 content: ""; 291 display: block; 292 clear: both; 293} 294 295.menu li{ 296 float: left; 297 width: auto; 298} 299 300.box4:after{ 301 content: ""; 302 display: block; 303 clear: both; 304} 305 306.box4-1{ 307 float: left; 308 width: 70%; 309 padding-right: 35px; 310 -moz-box-sizing:border-box; 311 -webkit-box-sizing:border-box; 312 box-sizing:border-box; 313} 314 315.box4-2{ 316 float: left; 317 width: 30%; 318} 319 320.boxA:after{ 321 content: ""; 322 display:block; 323 clear:both; 324} 325 326 327.box1{ 328 float:left; 329 width: auto;} 330 331.box2{ 332 float:right; 333 width: auto;} 334} 335 336.box6:after{ 337 content: ""; 338 display: block; 339 clear:both; 340} 341 342.box6-1{ 343 float: left; 344 width: 33.3333%; 345 padding-right:10px; 346} 347 348.box6-2{ 349 float: left; 350 width: 33.3333%; 351 padding-left: 5px; 352 padding-right: 5px; 353} 354 355.box6-3{ 356 float: left; 357 width: 33.3333%; 358 padding-left: 10px; 359} 360 361.box6-1,.box6-2,.box6-3{ 362 -moz-box-sizing:border-box; 363 -webkit-box-sizing:border-box; 364 box-sizing: border-box; 365} 366 367 368/* ################ 767px以下 ####################*/ 369@media(max-width:767px){ 370 371#menubtn{ 372 padding: 6px 12px; 373 border:solid 1px #aaaaaa; 374 border-radius: 5px; 375 background-color: #ffffff; 376 position: absolute; 377 top: 20px; 378 right: 15px; 379 cursor: pointer; 380} 381 382#menubtn:hover{ 383 background-color: #dddddd; 384} 385 386#menubtn:focus{ 387 outline: none; 388} 389 390#menubtn i{ 391 color: #888888; 392 font-size: 18px; 393} 394 395#menubtn span{ 396 display: inline-block; 397 text-indent:-9999px; 398} 399 400#menu{ 401 display: none; 402} 403 404.menu ul{ 405 margin:0; 406 padding:0; 407 list-style: none; 408} 409 410.menu li a{ 411 display: block; 412 padding: 5px; 413 color: #000000; 414 font-size: 14px; 415 text-decoration:none; 416} 417 418.menu li a:hover{ 419 background-color: #eeeeee; 420} 421 422.box6-1,.box6-2,.box6-3{ 423 width: 100%; 424 padding:0; 425 margin-bottom: 10px; 426 427 428} 429 430} 431 432/* ################ 599px以下 ####################*/ 433@media(max-width: 599px){ 434.menu li a{ 435 padding: 10px 7px; 436 font-size:11px; 437} 438 439.catch{ 440 padding: 5px 10px; 441 font-size: 12px; 442} 443 444}

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

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

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

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

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

guest

回答1

0

ベストアンサー

以下のようにしてはいかがでしょうか?

HTML

1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>SSG</title> 6 <meta name="viewport" content="windows=device-width"> 7 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> 8 <link rel="stylesheet" href="./common/reset.css"> 9 <link rel="stylesheet" href="./common/style.css"> 10 11 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 12 <script> 13 $(function () { //修正 14 15 $("#menubtn").click(function () { 16 $("#menu").slideToggle(); 17 }); 18 }); 19 </script> 20</head> 21<body> 22<div class="boxA"> 23 <div class="boxA-inner"> 24 <div class="box1"> 25 <div class="site"> 26 <h1><a href="#">LongZhu</a></h1> 27 </div><!-- site --> 28 </div> 29 30 <div class="box2"> 31 32 <button type="button" id="menubtn"> 33 <i class="fa fa-bars"></i><span>MENU</span> 34 </button> 35 36 <nav class="menu" id="menu"> 37 <ul> 38 <li><a href="#">トップ</a></li> 39 <li><a href="#">沿革</a></li> 40 <li><a href="#">メンバー紹介</a></li> 41 <li><a href="#">採用情報</a></li> 42 <li><a href="#">お問い合わせ</a></li> 43 </ul> 44 </nav> 45 </div> 46 </div><!-- boxA-inner --> 47</div><!-- boxA --> 48 49<div class="box3"> 50 <div class="top"> 51 <img src="./common/img/main.jpg" class="topimg"> 52 <p class="catch">LongZhuはデータの蓄積と<br> 53 分析・解析のサービスを提供します。</p> 54 55 </div> 56 57</div> 58 59<div class="box6"> 60 <div class="box6-1"> 61 <div class="gaiyou"> 62 <a href="#"> 63 <i class="fa fa-database"></i> 64 <h1>データの分析・解析</h1> 65 <p>目的に応じてさまざまな角度から<br> 66 データを分析・解析します。</p> 67 </a> 68 </div> 69 </div><!-- box6-1 --> 70 71 <div class="box6-2"> 72 <div class="gaiyou"> 73 <a href="#"> 74 <i class="fa fa-bar-chart-o"></i> 75 <h1>わかりやすく視覚化</h1> 76 <p>解析結果はわかりやすく視覚化し、<br> 77 活用できるようにします。</p> 78 </a> 79 </div> 80 </div><!-- box6-2 --> 81 82 <div class="box6-3"> 83 <div class="gaiyou"> 84 <a href="#"> 85 <i class="fa fa-envelope"></i> 86 <h1>24時間サポート</h1> 87 <p>24時間サポートでトラブルにも<br> 88 素早く対応します。</p> 89 </a> 90 </div> 91 </div><!-- box6-3 --> 92</div> 93<div class="box4"> 94 <div class="box4-1"> 95 96 <div class="news"> 97 <h1>お知らせ</h1> 98 <ul> 99 <li><a href="#"> 100 <time datetime="2017-06-01">06/01</time> 101 <div class="text">データセンターのメンテナンスを行います。</div> 102 </a></li> 103 <li><a href="#"> 104 <time datetime="2017-06-02">06/02</time> 105 <div class="text">Android版アプリ バージョン1.2をリリースしました。</div> 106 </a></li> 107 <li><a href="#"> 108 <time datetime="2017-06-03">06/03</time> 109 <div class="text">セミナー開催に伴うキャンペーンのお知らせ。</div> 110 </a></li> 111 <li><a href="#"> 112 <time datetime="2017-06-04">06/04</time> 113 <div class="text">グラフ表示の切替方法がわかりやすくなりました。</div> 114 </a></li> 115 </ul> 116 </div> 117 </div><!-- box4-1 --> 118 119 <div class="box4-2"> 120 <div class="follow"> 121 <p class="follow-info">最新情報はこちらでも配信しています</p> 122 <ul> 123 <li><a href="#" class="follow-tw"> 124 <i class="fa fa-fw fa-twitter"></i> 125 Twitter 126 </a></li> 127 <li><a href="#" class="follow-fb"> 128 <i class="fa fa-fw fa-facebook"></i> 129 Facebook 130 </a></li> 131 <li><a href="#" class="follow-gp"> 132 <i class="fa fa- fw fa-google-plus"></i> 133 Google+ 134 </a></li> 135 </ul> 136 </div> 137 </div> 138</div><!-- box4 --> 139<div class="box5"> 140 <div class="box5-inner"> 141 <div class="copyright"> 142 <p>copyright &copy; LongZhu</p> 143 </div> 144 </div><!-- box5-inner --> 145</div> 146</body> 147</html>

投稿2017/06/05 06:06

編集2017/06/06 05:26
s8_chu

総合スコア14731

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

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

Kuriaki

2017/06/05 06:14

ご回答ありがとうございます。 ベストにさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問