Q&A
本件と直接関係あるかは分からないですが、jQuery1系を使われていますが、利用しているブラウザの制限などがあるのでしょうか？IE8以前のサポートが必要とか。ないのでしたらなるべく3系最新のほうが良いように思います。
PCの時はホバーすると画像などが表示されるレスポンシブメニューを作りたい
こんにちは。
jQuery学びたてです。
jQueryでレスポンシブメニューを作っています。
PCの時はナビゲーションバーにホバーすると子要素がナビ全体に広がる仕様です。
960px未満はハンバーガーメニューがでて、よくある多階層のメニューにしたいです。
よろしくお願いします。
発生している問題・エラーメッセージ
１）スマホでメニューを開いて閉じてからPC表示にするとメニューが消えている
２）PCからスマホ・タブレット表示にするとハンバーガーメニューをクリックしても効かない。
該当のソースコード
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>新メニュー案</title> 6<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7<link rel="stylesheet" href="css/html5reset-1.6.1.css"> 8<link rel="stylesheet" href="css/style.css"> 9<!-- <script src="js/jquery-2.1.4.min.js"></script> --> 10<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 11<script src="js/script.js"></script> 12</head> 13<body> 14 <header> 15 <div class="nav_container"> 16 <button class="navToggle" type="button"><span></span><span></span><span></span><span>メニュー</span></button> 17 <nav> 18 <ul class="nav_main"> 19 <li class="nav1"><a href="#">サービス</a> 20 <ul class="nav_sub"> 21 <li class="nav_event"> 22 <dl> 23 <dt><a href="#"><h3>イベントプロモーション</h3></a></dt> 24 <dd><a href="#">新製品発表会</a></dd> 25 <dd><a href="#">展示会</a></dd> 26 <dd><a href="#">商談会</a></dd> 27 <dd><a href="#">結婚式場イベント</a></dd> 28 </dl> 29 </li> 30 <li class="nav_rental"> 31 <dl> 32 <dt><a href="#"><h3>レンタル機器</h3></a></dt> 33 <dd><a href="#">サイネージ</a></dd> 34 <dd><a href="#">セグウェイ</a></dd> 35 <dd><a href="#">モニター</a></dd> 36 <dd><a href="#">テント</a></dd> 37 <dd><a href="#">喫煙ブース</a></dd> 38 <dd><a href="#">大型ビジョン</a></dd> 39 <dd><a href="#">プレハブ</a></dd> 40 <dd><a href="#">音響機器</a></dd> 41 <dd><a href="#">ご注文ガイド</a></dd> 42 </dl> 43 </li> 44 <li class="nav_package"> 45 <dl> 46 <dt><a href="#"><h3>パッケージブース</h3></a></dt> 47 <dd><a href="#">パッケージブース一覧</a></dd> 48 </dl> 49 </li> 50 <li class="nav_movie"><a href="#"><h3>映像制作</h3></a></li> 51 <li class="nav_display"><a href="#"><h3>ディスプレイアイテム</h3></a></li> 52 <li class="nav_system"><a href="#"><h3>イベント管理システム</h3></a></li> 53 <li class="nav_led"><a href="#"><h3>LEDライトパネル</h3></a></li> 54 <li class="nav_truss"><a href="#"><h3>ステージトラス</h3></a></li> 55 <li class="nav_shop"> 56 <dl> 57 <dt><a href="#"><h3>ショップアイテム</h3></a></dt> 58 <dd><a href="#">壁面ディスプレイ什器ecoロジ</a></dd> 59 <dd><a href="#">ファブリックイメージズ</a></dd> 60 </dl> 61 </li> 62 </ul> 63 </li> 64 <li class="nav2"><a href="#">制作・施工実績</a> 65 <ul class="nav_sub"> 66 <li class="nav_new_works"> 67 <dl> 68 <dt><a href="#"><h3>最新の施工実績</h3></a></dt> 69 <dd><a href="#">実績</a></dd> 70 <dd><a href="#">実績</a></dd> 71 <dd><a href="#">実績</a></dd> 72 <dd><a href="#">実績</a></dd> 73 <dd><a href="#">実績</a></dd> 74 <dd><a href="#">実績</a></dd> 75 </dl> 76 </li> 77 <li class="nav_old_works"> 78 <dl> 79 <dt><a href="#"><h3>過去の施工実績</h3></a></dt> 80 <dd><a href="#">実績</a></dd> 81 <dd><a href="#">実績</a></dd> 82 <dd><a href="#">実績</a></dd> 83 <dd><a href="#">実績</a></dd> 84 <dd><a href="#">実績</a></dd> 85 <dd><a href="#">実績</a></dd> 86 </dl> 87 </li> 88 </ul> 89 </li> 90 <li class="nav3"><a href="#">お役立ち情報</a> 91 <ul class="nav_sub"> 92 <li class="nav_useful"><a href="#"><h3>見たもらいたいお役立ち情報１</h3></a></li> 93 <li class="nav_useful"><a href="#"><h3>見てもらいたいお役立ち情報２</h3></a></li> 94 <li class="nav_useful"><a href="#"><h3>見たもらいたいお役立ち情報3</h3></a></li> 95 <li class="nav_useful"><a href="#"><h3>見てもらいたいお役立ち情報4</h3></a></li> 96 </ul> 97 </li> 98 <li class="nav4"><a href="#">企業情報</a> 99 <ul class="nav_sub"> 100 <li class="nav_strength"><a href="#"><h3>当社の強み</h3></a></li> 101 <li class="nav_about"><a href="#"><h3>会社概要</h3></a></li> 102 </ul> 103 </li> 104 <li class="nav5"><a href="#">採用情報</a> 105 <ul class="nav_sub"> 106 <li class="nav_recruit_new"><a href="#"><h3>新卒採用</h3></a></li> 107 <li class="nav_recruit_mid"><a href="#"><h3>中途採用</h3></a></li> 108 </ul> 109 </li> 110 <li class="nav6"><a href="#">初めての方へ</a></li> 111 </ul> 112 </nav> 113 </div><!-- nav_container --> 114 </header> 115 <main> 116 <article> 117 <section style="height: 500px"> 118 <p style="text-align: center;line-height: 200px;font-size: 3rem;font-weight: bold;">コンテンツ</p> 119 </section> 120 </article> 121 </main> 122</body> 123</html>
css
1body { 2 font-family: Linotte, YuGothic, "Yu Gothic",'Avenir Next', 'Helvetica Neue', sans-serif; 3 width: 100%; 4} 5html,body { 6 height: 100%; 7 font-family: Linotte, YuGothic, "Yu Gothic",メイリオ,Meiryo,sans-serif, !important; 8} 9header { 10 background-image: url(../img/ocean.JPG); 11 height: 100vh; 12 background-size: cover; 13} 14.nav_container { 15 width: 100%; 16 height: 80px; 17} 18nav { 19 position: fixed; 20 top: 0; 21 width: 100%; 22 /*height: 80px;*/ 23 display: block; 24} 25.nav_main { 26 max-width: 960px; 27 position: relative; 28 margin: 0 auto; 29 width: 100%; 30 background-color: #fff; 31} 32.nav_main > li { 33 height: 80px; 34 width: calc(100% * 1/6); 35 float: left; 36 display: block; 37 background-color: #fff; 38} 39.nav_main a { 40 text-decoration: none; 41 color: #333333; 42} 43.nav_main > li > a { 44 display: block; 45 width: 100%; 46 line-height: 80px; 47 text-align: center; 48} 49.nav_sub { 50 position: absolute; 51 top: 80px; 52 left: -0.5px; 53 padding: 20px 30px; 54 display: none; 55 width: 900px; 56 background-color: #fff; 57 border-radius: 2px; 58 border: 0.5px solid #333333; 59} 60.nav_sub li { 61 margin-bottom: 10px; 62} 63.nav_sub dt { 64 margin-bottom: 10px; 65} 66.nav_sub dd { 67 margin-bottom: 8px; 68} 69 70 71 72/*サービスのサブメニュー*/ 73.nav_event,.nav_rental { 74 float: left; 75 width: 290px; 76 margin-right: 20px; 77} 78.nav_new_works { 79 width: 70%; 80 margin-right: 5%; 81 float: left; 82} 83.nav_old_works { 84 width: 25%; 85 float: left; 86} 87/*お役立ち情報*/ 88.nav_useful { 89 width: 23%; 90 margin: 1%; 91 height: 200px; 92 float: left; 93} 94 95 96 97/*----------------- 98ハンバーガーメニュー START 99-----------------*/ 100.navToggle { 101 display: block; 102 position: fixed; 103 right: 13px; 104 top: 12px; 105 width: 42px; 106 height: 51px; 107 cursor: pointer; 108 z-index: 3; 109 background: #666; 110 text-align: center; 111 display: none; 112} 113.navToggle span { 114 display: block; 115 position: absolute; /* .navToggleに対して */ 116 width: 30px; 117 border-bottom: solid 3px #eee; 118 -webkit-transition: .35s ease-in-out; 119 -moz-transition: .35s ease-in-out; 120 transition: .35s ease-in-out; 121 left: 6px; 122} 123.navToggle span:nth-child(1) { 124 top: 9px; 125} 126.navToggle span:nth-child(2) { 127 top: 18px; 128} 129.navToggle span:nth-child(3) { 130 top: 27px; 131} 132.navToggle span:nth-child(4) { 133 border: none; 134 color: #eee; 135 font-size: 9px; 136 font-weight: bold; 137 top: 34px; 138} 139/*タップしたらクロスする*/ 140.open .navToggle span:nth-child(1) { 141 top: 18px; 142 left: 6px; 143 -webkit-transform: rotate(-45deg); 144 -moz-transform: rotate(-45deg); 145 transform: rotate(-45deg); 146} 147.open .navToggle span:nth-child(2), 148.open .navToggle span:nth-child(3) { 149 top: 18px; 150 -webkit-transform: rotate(45deg); 151 -moz-transform: rotate(45deg); 152 transform: rotate(45deg); 153} 154/*----------------- 155ハンバーガーメニュー END 156-----------------*/ 157 158 159 160 161@media (max-width: 959px) { 162 .navToggle { 163 display: block; 164 } 165 nav { 166 display: none; 167 position: fixed; 168 top: 80px; 169 } 170 .nav_container { 171 background-color: #fff; 172 } 173 .nav_main { 174 display: block; 175 } 176 .nav_main > li { 177 float: none; 178 } 179 .nav_main > li > a { 180 display: block; 181 } 182} 183
jQuery
1// メニューにホバーまたはクリックしたらサブメニューが表示される 2$(function(){ 3 $(".nav_main > li > a").click(function(){ 4 $("+ ul",this).slideToggle(); 5 return false; 6 }); 7 $(".nav_main > li").hover(function(){ 8 $("> ul",this).stop().slideToggle(); 9 }); 10}); 11 12$(function(){ 13 var winW = $(window).width(); 14 var conW = 960; 15 if(winW <= conW) { 16 $('.navToggle').click(function(){ 17 $('header').toggleClass('open'); 18 $('nav').stop().slideToggle(1000); 19 }); 20 } 21});
試したこと
１）画面幅で条件を指定して、showを使って960以上の時はメニューを表示状態にしようとしましたが、うまく機能しませんでした。
２）slideToggleが被っているのでおかしいのかと思いfadeToggle等を使いましたが解決しませんでした。
mts10806さん
ありがとうございます。
現状のHPで使っているメニューのプラグインが1系なので、こちらでも1系を使いました。
だた、そのプラグインの代わりにこのメニューを作っているので、3系に変更します。
回答1件
0
ベストアンサー
提示されたコードは「ページが準備できた段階で画面幅が特定の場合のみクリックイベントを準備する」というコードになっています。
なので途中で切り替えてもイベントが準備できているかは最初の画面幅しだいです。
js
1$(function(){ 2 var winW = $(window).width(); 3 var conW = 960; 4 if(winW <= conW) { 5 $('.navToggle').click(function(){ 6 $('header').toggleClass('open'); 7 $('nav').stop().slideToggle(1000); 8 }); 9 } 10});
たとえば下記のようにすれば最初の画面幅と関係なく判断はできます。
js
1$(function(){ 2 $('.navToggle').click(function(){ 3 var winW = $(window).width(); 4 var conW = 960; 5 if(winW <= conW) { 6 $('header').toggleClass('open'); 7 $('nav').stop().slideToggle(1000); 8 } 9 }); 10});
投稿2019/01/22 08:12
総合スコア69625
slideToggle()を使えばdisplay:noneとなってしまって１）を満たさないので、resizeを見る必要があるでしょうね
https://teratail.com/questions/160500
To: x_xさん
そうですね、補足ありがとうございます。（リンク先の昔の自分の回答のほうが丁寧だった）
To:kei344さん
ご回答ありがとうございます。
x_xさんが教えてくれた昔の回答も参考にさせて頂いてやってみます！
To:x_xさん
コメントありがとうございます。
解決できるように頑張ってみます。
あなたの回答
tips
プレビュー
