Q&A
なんと・・・！開きますか・・・？
今も再度確認しましたが、検証ツールでiPad/iPhoneXを指定して確認しても、窓を手動で最小にしても
・メニューの三本線は表示される
・マウスオーバーでカーソルが変わる
ことはしますが、クリックしても何も変化がありません。
ハンバーガーメニューを実装したいのですが、何度見直してもメニューが開かない原因が分からずお力を貸して頂けると助かります・・・！
必要そうな部分を引っ張ってきていますが、まだまだ未熟な為、情報が不足している場合はご連絡いただければ補足でお伝えできればと思います。よろしくお願いいたします。
ちなみに、スムーススクロール等他にもjs/script.jsファイルに記述しており、ハンバーガーメニュー以外は動作確認ができてますので、読み込みは出来ているものと思われます。
他記述分が悪さをしているのかもしれないと、一旦他部分を消してメニューのみで試してみましたが機能しませんでした。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <!--他meta省略--> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 <link rel="stylesheet" type="text/css" href="css/reset.css"> 9 <link rel="stylesheet" type="text/css" href="css/style.css"> 10</head> 11 12<body> 13<header> 14 <div class="header_all"> 15 <p class="header_title">XXX</p> 16 17 <div class="menu_all"> 18 <nav class="navbar"> 19 <ul> 20 <li><a href="#">menu1</a></li> 21 <li><a href="#">menu2</a></li> 22 <li><a href="#">menu3</a></li> 23 <li><a href="#">menu4</a></li> 24 <li><a href="#">menu5</a></li> 25 </ul> 26 </nav> 27 </div> 28 29 </div> 30 31 <p class="drawer"></p> 32</header> 33 34<main> ~ </main> 35<footer> ~ </footer> 36 37<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 38<script src="js/script.js"></script> 39 40</body> 41</html>
CSS
1header .respons { 2 visibility: hidden; 3 width: 0; 4 height: 0; 5} 6 7header .drawer { 8 visibility: hidden; 9} 10 11/*** レスポンシブ ***/ 12@media screen and (max-width: 768px) { 13header .drawer { 14 visibility: visible; 15 width: 24px; 16 right: 15px; 17 margin: 18px; 18 position: absolute; 19 border-top: solid 4px #fff; 20 cursor: pointer; 21 z-index: 100; 22} 23 24header .drawer::before, 25header .drawer::after { 26 content: ""; 27 display: block; 28 width: 24px; 29 background: #fff; 30 height: 4px; 31 position: absolute; 32 right: 0; 33 -webkit-transition: all 0.5s; 34 transition: all 0.5s; 35} 36 37header .drawer::before { 38 top: 6px; 39} 40 41header .drawer::after { 42 top: 15px; 43} 44 45header .navbar { 46 position: fixed; 47 width: 100%; 48 height: 100%; 49 display: none; 50 top: 0; 51 left: 0; 52 z-index: 3; 53 background: #fff; 54} 55 56header .navbar ul { 57 display: block; 58 text-align: center; 59 float: none; 60 top: 20%; 61} 62 63header .navbar ul li a { 64 font: 18px; 65 line-height: 2; 66} 67 68body.nav-open header .drawer { 69 border-top: 0; 70} 71 72body.nav-open header .drawer::before { 73 top: 9px; 74 transform: rotate(-45deg); 75} 76 77body.nav-open header .drawer::after { 78 top: 9px; 79 transform: rotate(45deg); 80} 81}
jQuery
1window.onunload = function() {}; 2 3function sizecheck() { 4 w = window.innerWidth ? window.innerWidth : $(window).width(); 5 h = window.innerHeight ? window.innerHeight : $(window).height(); 6} 7 8sizecheck(); 9$(function () { 10 11 if (w > 769) { 12} else { 13 $("header .drawer").click(function(){ 14 $('body').toggleClass('nav-open'); 15 $('header .navbar').fadeToggle(200); 16 }); 17 18 $("header li a").click(function(){ 19 $('body').toggleClass('nav-open'); 20 $('header .navbar').fadeToggle(200); 21 }); 22 } 23});
回答2件
0
スクリプトが、ロード時に769px超の時には動作しないのが原因ではないですか？
PCサイズで開いて、その後に開発者ツールでレスポンシブモードに切り替えたところ、クリックしてもメニューが開かなかったです。
その後、レスポンシブモードのままリロードしたら開くようになりました。
投稿2021/10/05 04:20
編集2021/10/05 04:27
総合スコア36163
0
ベストアンサー
ハンバーガーをクリックしたら開きました。
開かないのはスクリーンの幅が768より大きいからでしょう。
投稿2021/10/04 15:50
総合スコア8402
まずはCSSで設定している 768 を 9768 とかにして、JavaScriptの w > 769 も w > 9769 とかにして試してみては。
ところで今気づきましたが、768pxまでが対象なら w > 769 ではなくて w > 768 ではないですかね。
試してみましたが開きませんでした。
w > 769は「未満」の意味で指定しています。
開きませんか。おかしいですね。
カーソルもpointerに変化しませんか？
カーソルがpointerに変化する場所があって、そこをクリックしていますか？
> w > 769は「未満」の意味で指定しています。
ですからCSSでは幅が最大 768 までハンバーガーメニューを効かせているんですよね。
それならJavaScriptで無効にしたいのは 769 以上なのでしょうから
w > 768
または
w >= 769
なのではないですか？
＞７６９
たしかにそうですね・・・！すっかり勘違いしていました。ありがとうございます。
開かなかった原因はもうお一方のご指摘の部分と、プログラムの記述位置も原因だったようで、場所を入れ替え入れ替えしているうちに開くようになりました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/06 17:05