jqueryでレスポンシブ対応のメニューを作成したいと思っております。
大カテゴリーをハンバーガーメニューで左から出し、その中の小カテゴリーをアコーディオンで表示させたいです。
左からメニューを出すことは出来たのですが、アコーディオンメニューを設置すると全てのカテゴリーが同時に開いてしまいます。
「.next」を追加してみたのですが、追加をするとアコーディオンが反応しなくなります。
解決策の知恵をお貸しくださいませ。
html
1 <div id="wrap"> 2 <header> 3 <div class="inner clearfix"> 4 <p class="navBtn"> 5 <span></span> 6 <span></span> 7 <span></span> 8 </p> 9 <nav role='navigation'> 10 <ul class="clearfix"> 11 <li class="list">カテゴリーメニュー</li> 12 <li><a href="">テスト</a></li> 13 <li class="toggle"><a href="" class="dropdown-toggle" data-toggle="dropdown">テスト</a> 14 <ul class="menu"> 15 <li><a href="">テスト</a></li> 16 <li><a href="">テスト</a></li> 17 <li><a href="">テスト</a></li> 18 </ul> 19 </li> 20 <li class="toggle"><a href="" class="dropdown-toggle" data-toggle="dropdown">テスト</a> 21 <ul class="menu"> 22 <li><a href="">テスト</a></li> 23 <li><a href="">テスト</a></li> 24 <li><a href="">テスト</a></li> 25 </ul> 26 </li> 27 </ul> 28 </nav> 29 30 </div> 31 </header> 32 33 <div id="contents"> 34 <p>コンテンツ</p> 35 36 <!-- /#contents --> 37 </div> 38 <!-- /#wrap --> 39 </div>
css
1nav { 2 -webkit-transition: 0.3s ease-in-out; 3 -moz-transition: 0.3s ease-in-out; 4 transition: 0.3s ease-in-out; 5} 6 7.clearfix:before, 8.clearfix:after { 9 content: " "; 10 display: table; 11} 12 13.clearfix:after { 14 clear: both; 15} 16 17.clearfix { 18 *zoom: 1; 19} 20 21body { 22 font-family: 'Questrial', Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; 23} 24 25.fixed { 26 position:fixed; 27 top:0; 28 left:0; 29 width:100%; 30} 31 32/* オーバーレイ */ 33.overlay { 34 position: fixed; 35 top: 0; 36 left: 0; 37 display: none; 38 width: 100%; 39 height: 100%; 40 background: #000; 41 opacity: 0.7; 42 filter: alpha(opacity=70); 43 -ms-filter: "alpha(opacity=70)"; 44 z-index: 999; 45} 46 47/* ヘッダー */ 48header { 49 position:fixed; 50 top:0; 51 left:0; 52 width:100%; 53 background:#fff; 54 box-shadow: 0 2px 5px rgba(0,0,0,0.26); 55 z-index:9999; 56 -webkit-user-select:none; 57 -moz-user-select:none; 58 user-select:none; 59} 60header .inner { 61 position:relative; 62 width:100%; 63 margin:0 auto; 64 padding:30px 0; 65 -webkit-box-sizing:border-box; 66 -moz-box-sizing:border-box; 67 box-sizing:border-box; 68} 69 70/* ナビゲーション */ 71header nav { 72 float:right; 73 width: 80%; 74} 75/* ナビゲーション:アクティブ時 */ 76header.navOpen nav { 77 opacity: 1; 78 left: 0; 79} 80header nav ul { 81} 82header nav ul li { 83 float:left; 84 width: 16.6666%; 85 border-bottom:1px solid #ccc; 86} 87header nav ul li a { 88 position:relative; 89 display:block; 90 padding:1.5em; 91 color:#999; 92 text-decoration:none; 93} 94header nav ul li a:hover { 95 background:#f2f2f2; 96} 97 98/* ナビゲーションアイコン */ 99header .navBtn { 100 display: none; 101 width: 30px; 102 position: absolute; 103 top: 3px; 104 left: 15px; 105 cursor: pointer; 106} 107header .navBtn span { 108 display: block; 109 height: 4px; 110 width: 100%; 111 background: #E60012; 112 border-radius: 2px; 113 -webkit-transition: all .5s ease-in-out; 114 -moz-transition: all .5s ease-in-out; 115 transition: all .5s ease-in-out; 116} 117header .navBtn span:nth-of-type(2), 118header .navBtn span:nth-of-type(3) { 119 margin-top: 5px; 120} 121/* ナビゲーションアイコン:アクティブ */ 122header.navOpen .navBtn span:nth-of-type(1) { 123 -webkit-transform: translateY(9px) translateX(0) rotate(45deg); 124 -ms-transform: translateY(9px) translateX(0) rotate(45deg); 125 transform: translateY(9px) translateX(0) rotate(45deg); 126} 127header.navOpen .navBtn span:nth-of-type(2) { 128 margin-top: 5px; 129 opacity: 0; 130 -webkit-transform: translateY(9px); 131 -ms-transform: translateY(9px); 132 transform: translateY(9px); 133} 134header.navOpen .navBtn span:nth-of-type(3) { 135 -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); 136 -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); 137 transform: translateY(-9px) translateX(0) rotate(-45deg); 138} 139 140#contents { 141 max-width: 1080px; 142 margin:120px auto 0; 143 /*padding:1em 1.5em;*/ 144 line-height:1.5; 145} 146#contents p { 147 margin-bottom:1em; 148} 149 150/* レスポンシブ */ 151@media screen and (max-width:767px){ 152 header .navBtn { 153 display:block; 154 } 155 header nav { 156 overflow:auto; 157 position: fixed; 158 top: 0; 159 left: -70%; 160 float:none; 161 width: 70%; 162 max-width:320px; 163 height: 100%; 164 background: #fff; 165 opacity: 0; 166 z-index:9999; 167 } 168 header nav ul li { 169 float: none; 170 width: auto; 171 list-style-type: none; 172 } 173 #contents { 174 margin-top:80px; 175 } 176} 177.clearfix{ 178 padding-left: 0; 179} 180 181 182/***/ 183.clearfix:before, 184.clearfix:after { 185 content: " "; 186 display: table; 187} 188 189.clearfix:after { 190 clear: both; 191} 192 193.clearfix { 194 *zoom: 1; 195} 196.fixed { 197 position:fixed; 198 top:0; 199 left:0; 200 width:100%; 201} 202 203/* オーバーレイ */ 204.overlay { 205 position: fixed; 206 top: 0; 207 left: 0; 208 display: none; 209 width: 100%; 210 height: 100%; 211 background: #000; 212 opacity: 0.7; 213 filter: alpha(opacity=70); 214 -ms-filter: "alpha(opacity=70)"; 215 z-index: 999; 216} 217 218/* ヘッダー */ 219header { 220 position:fixed; 221 top:0; 222 left:0; 223 width:100%; 224 background:#fff; 225 box-shadow: 0 2px 5px rgba(0,0,0,0.26); 226 z-index:9999; 227 -webkit-user-select:none; 228 -moz-user-select:none; 229 user-select:none; 230} 231header h1 { 232 float:left; 233 width:20%; 234 margin-top: 1em; 235 font-size:1.5em; 236 font-weight:bold; 237} 238 239/* ナビゲーション */ 240header nav { 241 float:right; 242 width: 80%; 243} 244/* ナビゲーション:アクティブ時 */ 245header.navOpen nav { 246 opacity: 1; 247 right: 0; 248} 249header nav ul { 250 width: 100%; 251 border-top:1px solid #ccc; 252} 253/* ナビゲーションアイコン */ 254header .navBtn { 255 display: none; 256 width: 30px; 257 position: absolute; 258 right: 15px; 259 cursor: pointer; 260} 261 262header .navBtn span:nth-of-type(2), 263header .navBtn span:nth-of-type(3) { 264 margin-top: 5px; 265} 266/* ナビゲーションアイコン:アクティブ */ 267header.navOpen .navBtn span:nth-of-type(1) { 268 -webkit-transform: translateY(9px) translateX(0) rotate(45deg); 269 -ms-transform: translateY(9px) translateX(0) rotate(45deg); 270 transform: translateY(9px) translateX(0) rotate(45deg); 271} 272header.navOpen .navBtn span:nth-of-type(2) { 273 margin-top: 5px; 274 opacity: 0; 275 -webkit-transform: translateY(9px); 276 -ms-transform: translateY(9px); 277 transform: translateY(9px); 278} 279header.navOpen .navBtn span:nth-of-type(3) { 280 -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); 281 -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); 282 transform: translateY(-9px) translateX(0) rotate(-45deg); 283} 284 285#contents { 286 max-width: 1080px; 287 margin:120px auto 0; 288 padding:1em 1.5em; 289 line-height:1.5; 290} 291#contents p { 292 margin-bottom:1em; 293} 294 295/* レスポンシブ */ 296@media screen and (max-width:1080px){ 297 header .inner { 298 padding: 1.5em; 299 } 300 header h1 { 301 width: 30%; 302 margin-top: 0em; 303 } 304 header nav { 305 width:70%; 306 } 307 header nav ul li { 308 width: 33.333%; 309 } 310 #contents { 311 margin-top:180px; 312 } 313} 314@media screen and (max-width:640px){ 315 header h1 { 316 width: auto; 317 margin-top: 0; 318 } 319 header .navBtn { 320 display:block; 321 } 322 header nav { 323 overflow:auto; 324 position: fixed; 325 top: 0; 326 right: -70%; 327 float:none; 328 width: 70%; 329 max-width:320px; 330 height: 100%; 331 background: #fff; 332 opacity: 0; 333 z-index:9999; 334 } 335 header nav ul li { 336 float: none; 337 width: auto; 338 } 339 #contents { 340 margin-top:80px; 341 } 342} 343.toggle ul{ 344 display: none; 345 padding: 0; 346} 347.toggle ul{ 348 display: none; 349 padding: 0; 350} 351.toggle ul.menu li a{ 352 padding-left: 40px; 353} 354
jQuery
1 2$(function(){ 3// オーバーレイ作成 4$('#contents').prepend('<div class="overlay"></div>'); 5 6// アイコンをクリックしたら 7$('.navBtn').click(function() { 8 $('header').toggleClass('navOpen'); // class付与/削除 9 $('#wrap').toggleClass('fixed'); // コンテンツを固定/解除 10 $('.overlay').toggle(); // オーバーレイ表示/非表示 11 12 // スマホナビゲーションがヘッダーに被らないようにする 13 var headerH = $('header').outerHeight(); 14 if ($('header').hasClass('navOpen')) { 15 $('header nav').css('marginTop', '44px'); //ヘッダーの高さ分マージンを付ける 16 } 17}); 18 19// オーバーレイをクリックしたら 20$('.overlay').click(function() { 21 $(this).fadeOut(300); // オーバーレイ非表示 22 $('header').removeClass('navOpen'); // class削除 23 $('#wrap').removeClass('fixed'); // 固定解除 24}); 25 26// スマホサイズからPCになったとき 27$(window).on('load resize', function() { 28 var breakpoint = 640; 29 if (window.innerWidth > breakpoint) { 30 $('header').removeClass('navOpen'); // class削除 31 $('#wrap').removeClass('fixed'); // 固定解除 32 $('.overlay').hide(); // オーバーレイ非表示 33 $('header nav').css('marginTop', 0 + 'px'); // マージン削除 34 } 35}); 36}); 37 38 39$(function(){ 40 $(".toggle").click(function(){ 41 $(".menu").slideToggle(); 42 return false; 43 }); 44 $(window).resize(function(){ 45 var win = $(window).width(); 46 var p = 480; 47 if(win > p){ 48 $(".menu").show(); 49 } else { 50 $(".menu").hide(); 51 } 52 }); 53}); 54
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/12 10:37
2016/07/12 10:41
2016/07/12 10:42
2016/07/12 10:44
2016/07/12 11:01
2016/07/12 11:02
2016/07/12 11:11