Q&A
<header>
から
<!-- ------------------------クリック用ボタン ------------------------ -->
までの間が無いですよ？
ここが重要な点なので修正お願いします
あとCSSも略さないで下さい。
jQueryを用いてハンバーガーメニューを表示させたいのですが、クリックしても出てきません。
スマホ表示でのみ動作させたいので、chrome devツールのスマホ表示で確認しています。
三本線ボタンをクリックするとメニューが表示されるようにしたいです。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 <title>shumai_company</title> 9 <link rel="stylesheet" type="text/css" href="style.css"> 10 11 <!-- scriptタグを用いて、jQueryを使えるように読み込み --> 12 <script src=" 13 https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 14 </script> 15 16</head> 17 18<body> 19 <div id="site-box"> 20 21 <header> 22 23 <h1> 24 <a href="index.html"> 25 <div class="h-box"> 26 <img id="top-image" src="logo.png" alt="見出し画像"> 27 28 29 <!-- ------------------------クリック用ボタン ------------------------ --> 30 31 <!-- 未表示時 三本線ボタン--> 32 <div class="hum-line-absolute" id="hum-line-absolute"> 33 <div class="hum-line"> 34 <div class="hum-1"></div> 35 <div class="hum-2"></div> 36 <div class="hum-3"></div> 37 </div> 38 </div> 39 <!-- 表示時 バツボタン --> 40 <div class="hum-batsu" id="hum-batsu"> 41 <div class="hum-batsu1">×</div> 42 </div> 43 <!-- ------------------------クリック用ボタン終わり ----------------- --> 44 </div> 45 </a> 46 </h1> 47 </header> 48 49 <nav> 50 51 <!-- ------------------------ハンバーガーメニュー ------------------------ --> 52 53 54 <!-- メニュー内容 --> 55 56 <ul class="hum-ul" id="hum-ul"> 57 <a class="hum-a" href="index.html"> 58 <li class="hum-li"> 59 <div class="div_pages2">ホーム<div class="pages3">home</div> 60 </div> 61 </li> 62 </a> 63 <a class="hum-a" href="company.html"> 64 <li class="hum-li"> 65 <div class="div_pages2">会社概要<div class="pages3">company</div> 66 </div> 67 </li> 68 </a> 69 <a class="hum-a" href="service.html"> 70 <li class="hum-li"> 71 <div class="div_pages2">サービス<div class="pages3">service</div> 72 </div> 73 </li> 74 </a> 75 <a class="hum-a" href="recrute.html"> 76 <li class="hum-li"> 77 <div class="div_pages2">採用情報<div class="pages3">recrute</div> 78 </div> 79 </li> 80 </a> 81 <a class="hum-a" href="link.html"> 82 <li class="hum-li"> 83 <div class="div_pages2">リンク<div class="pages3">link</div> 84 </div> 85 </li> 86 </a> 87 <a class="hum-a" href="contact.html"> 88 <li class="hum-li"> 89 <div class="div_pages2">お問い合わせ<div class="pages3">contact</div> 90 </div> 91 </li> 92 </a> 93 </ul> 94 <!-- ------------------------ハンバーガー終わり------------------------ --> 95 96 97 <script src="script.js"></script> 98</body> 99 100</html> 101
以下 script.js
javascript
1 2$(function () { 3 $('#hum-line-absolute').click(function () { 4 $('#hum-ul').fadeIn(); 5 } 6 ); 7 8});
css
1@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/ 2 3 html { font-size: 30.5%; } 4 5 6body{ 7 width: 100%; 8 margin:0; 9 padding:0; 10 background: repeating-linear-gradient(-45deg,#a9a9a9 0, #a9a9a9 0.5px,#dcdcdc 0.5px,#dcdcdc 1px); 11 display: flex; 12} 13 14#site-box{ 15width: 100%; 16color: #666666; 17margin-left: auto; 18 margin-right: auto; 19 background-color: white; 20 /* display: flex; */ 21 22} 23div.div_pages2{ 24 25 font-size:4rem; 26 margin:10px; 27 color:white; 28 } 29.pages3{ 30 color:#bababa; 31 font: 2rem; 32 margin:0; 33 padding:0; 34 font-size:small; 35} 36/* ハンバーガー関連 */ 37.hum-line-absolute{ 38 position:absolute; 39 top:50%; 40 left:85%; 41 transform: translateY(-45%); 42} 43.hum-line{ 44 position: relative; 45 height: 36px; 46 width: 36px; 47 display: inline-block; 48 box-sizing: border-box; 49 background-color: #fff; 50 border: 2px solid #444; 51 border-radius: 4px; 52 53} 54.hum-1, .hum-2, .hum-3{ 55 /* position: absolute; */ 56 left: auto; 57 height: 4px; 58 width: 24px; 59 background-color: #444; 60 border-radius: 2px; 61/* display: inline-block; */ 62 box-sizing: border-box; 63 margin:4.5px; 64/* letter-spacing:px; */ 65} 66.hum-batsu{ 67 font-size:3rem; 68 font-weight:bold; 69 float: right; 70 font-size:5rem; 71 font-weight:bold; 72 float: right; 73 padding-left:1.5rem; 74 padding-right:1.5rem; 75 padding-top:0px; 76 77 display: none; 78 box-sizing: border-box; 79 background-color: #fff; 80 border: 2px solid #444; 81 border-radius: 4px; 82 83 position:absolute; 84 top:50%; 85 left:85%; 86 transform: translateY(-50%); 87} 88.hum-ul{ 89 position: absolute; 90 width: 100%; 91 background-color:black; 92 z-index: 2; 93 margin:0; 94 color:white; 95 opacity: 0.8; 96 /* display: block; */ 97 display:none; 98} 99li.hum-li{ 100 border-bottom: white dotted 1px; 101 width: 80%; 102 font-size: 2rem; 103} 104.hum-a{ 105 text-decoration: none; 106} 107}
クリックの処理は出来ているみたいなのですが、メニューが表示されません。
よろしくお願いします。
回答2件
0
こんにちは。
ハンバーガーメニューにリンクが設定されているので、クリックしたときにリンク先に飛んでしまっていると思うので、デフォルトの動作を抑止してみてはいかがでしょうか。
js
1 $('#hum-line-absolute').click(function (e) { // 引数を追加 2 $('#hum-ul').fadeIn(); 3 e.preventDefault(); // 追加 4
投稿2020/10/03 04:04
編集2020/10/03 04:06
総合スコア36960
0
ベストアンサー
動くようにはしました。
ただしレイアウトが正しくない様なのでその点は質問者様自身で行ってください
あと
javascript
1$(function () { 2 $('#hum-line-absolute').click(function () { 3 $('#hum-line-absolute').hide(); 4 $('#hum-ul').fadeIn(); 5 $('#hum-batsu').fadeIn(); 6 }); 7 $('#hum-batsu').click(function () { 8 $('#hum-ul').fadeOut(); 9 $('#hum-batsu').hide(); 10 $('#hum-line-absolute').fadeIn(); 11 }); 12});
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 <title>shumai_company</title> 9 <link rel="stylesheet" type="text/css" href="style.css"> 10 11 <!-- scriptタグを用いて、jQueryを使えるように読み込み --> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 13 <script> 14 15$(function () { 16 $('#hum-line-absolute').click(function () { 17 $('#hum-line-absolute').hide(); 18 $('#hum-ul').fadeIn(); 19 $('#hum-batsu').fadeIn(); 20 }); 21 $('#hum-batsu').click(function () { 22 $('#hum-ul').fadeOut(); 23 $('#hum-batsu').hide(); 24 $('#hum-line-absolute').fadeIn(); 25 }); 26}); 27 28 </script> 29 30</head> 31 32<body> 33 <div id="site-box"> 34 35 <header> 36 37 <h1> 38 <!-- ここのaタグが邪魔をしてclickイベントが取得できない。ボタンを押したらページ移動は必要ないのでは？ 39 <a href="index.html"> 40 --> 41 <div class="h-box"> 42 <img id="top-image" src="logo.png" alt="見出し画像"> 43 44 45 <!-- ------------------------クリック用ボタン ------------------------ --> 46 47 <!-- 未表示時 三本線ボタン--> 48 <div class="hum-line-absolute" id="hum-line-absolute"> 49 <div class="hum-line"> 50 <div class="hum-1"></div> 51 <div class="hum-2"></div> 52 <div class="hum-3"></div> 53 </div> 54 </div> 55 <!-- 表示時 バツボタン --> 56 <div class="hum-batsu" id="hum-batsu"> 57 <div class="hum-batsu1">×</div> 58 </div> 59 <!-- ------------------------クリック用ボタン終わり ----------------- --> 60 </div> 61 <!-- 62 </a> 63 --> 64 </h1> 65 </header> 66 67 <nav> 68 <!-- ------------------------ハンバーガーメニュー ------------------------ --> 69 <!-- メニュー内容 --> 70 <ul class="hum-ul" id="hum-ul"> 71 <a class="hum-a" href="index.html"> 72 <li class="hum-li"> 73 <div class="div_pages2">ホーム<div class="pages3">home</div> 74 </div> 75 </li> 76 </a> 77 <a class="hum-a" href="company.html"> 78 <li class="hum-li"> 79 <div class="div_pages2">会社概要<div class="pages3">company</div> 80 </div> 81 </li> 82 </a> 83 <a class="hum-a" href="service.html"> 84 <li class="hum-li"> 85 <div class="div_pages2">サービス<div class="pages3">service</div> 86 </div> 87 </li> 88 </a> 89 <a class="hum-a" href="recrute.html"> 90 <li class="hum-li"> 91 <div class="div_pages2">採用情報<div class="pages3">recrute</div> 92 </div> 93 </li> 94 </a> 95 <a class="hum-a" href="link.html"> 96 <li class="hum-li"> 97 <div class="div_pages2">リンク<div class="pages3">link</div> 98 </div> 99 </li> 100 </a> 101 <a class="hum-a" href="contact.html"> 102 <li class="hum-li"> 103 <div class="div_pages2">お問い合わせ<div class="pages3">contact</div> 104 </div> 105 </li> 106 </a> 107 </ul> 108 <!-- ------------------------ハンバーガー終わり------------------------ --> 109 </nav> 110 111 </div> 112 113</body> 114 115</html>
投稿2020/10/03 04:30
総合スコア2506
あなたの回答
tips
プレビュー
