前提・実現したいこと
2カラムで左がメイン、右がナビのサイトを作りました。
レスポンシブ化としてbootstrap4を使っています。
スマホサイズになったとき右にあるナビが下にずれます。それをハンバーガーメニューにしたいです。
該当のソースコード
html
1<body> 2<div> 3<!-- header contents start--> 4<nav class="navbar navbar-expand-lg"> 5 <div class="container"> 6 <a class="navbar-brand" href="#">タイトル</a> 7 <div id="nav-toggle"> 8 <div class="navDrawrBtn2"><span></span></div> 9 </div> 10 </div> 11</nav> 12<!-- header contents end--> 13 14<!-- main contents start--> 15<div class="container"> 16<div class="row"> 17<!-- left contents start--> 18<div class="col-lg-9"> 19 <div class="container"></div> 20</div> 21<!-- left contents end--> 22 23<!-- right contents start--> 24<div class="col-lg-3"> 25<div class="menu-heading">Menu</div> 26<ul id="menu"> 27 <li><a href="#"><i class="fa fa-home"></i><span class="link-title">HOME</span></a></li> 28 <li><a href="#"><i class="fa fa-tasks"></i><span class="link-title">AAA</span></a></li> 29 <li class="first-stage"><a href="#" class="syncer-acdn" data-target="syncer-acdn-01"><i class="fa fa-calendar"></i><span class="link-title">BBB</span><span class="fa arrow"></span></a> 30 <ul class="collapse" id="syncer-acdn-01"> 31 <li><a href="#"><i class="fa fa-angle-right"></i> BBB-A</a></li> 32 <li><a href="#"><i class="fa fa-angle-right"></i> BBB-B</a></li> 33 </ul> 34 </li> 35</ul> 36</div> 37<!-- right contents end--> 38</div> 39</div> 40<!-- main contents end--> 41</body>
js
1// DOMを全て読み込んでから処理する 2$(function() 3{ 4 // [.syncer-acdn]にクリックイベントを設定する 5 $( '.syncer-acdn' ).click( function() 6 { 7 // [data-target]の属性値を代入する 8 var target = $( this ).data( 'target' ) ; 9 10 // classを追加 11 $(this).toggleClass("open"); 12 13 // [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する 14 $( '#' + target ).slideToggle() ; 15 16 // 終了 17 return false ; 18 } ) ; 19}) ; 20
css
1/* 全体(共通) */ 2.row { 3 margin: 0; 4} 5.col-md-3,.col-md-9 { 6 padding: 0; 7} 8.col-md-6 { 9 padding-right: 0; 10} 11 12/* ヘッダー */ 13nav { 14 margin-bottom: 20px; 15 padding: 10px 15px; 16 background: #4072B3; 17} 18.navbar-brand { 19 color: #fff; 20} 21 22/* 右コンテンツ */ 23/* メニュー */ 24#menu { 25 margin: 0; 26 padding: 0; 27 list-style-type: none; 28} 29#menu a { 30 color: #394B5D; 31 text-decoration: none; 32} 33#menu a:hover { 34 color: #6088C6; 35} 36#menu > li { 37 border-top: solid 1px #394B5D; 38 padding: 15px 10px; 39 text-decoration: none; 40} 41ul.collapse li { 42 margin-bottom: 5px; 43} 44#menu .first-stage { 45 border-top: none; 46} 47.menu-heading { 48 padding: 5px 10px; 49 border-bottom: 1px solid transparent; 50 color: #fff; 51 background-color: #6088C6; 52 border-color: #6088C6; 53} 54/* 矢印 */ 55#menu .fa.arrow { 56 float: right; 57 padding-top: 3px; 58 margin-left: 10px; 59} 60.fa.arrow:before { 61 content: "\f104"; 62} 63.arrow { 64 line-height: 1.42857; 65 transition-duration: 0.5s; 66} 67.open .arrow { 68 transform: rotate( -90deg ); 69 transition-duration: 0.5s; 70} 71.fa-angle-right { 72 margin-right: 10px; 73} 74/* 入れ子 */ 75#menu > li ul { 76 padding: 10px 0 0 15px; 77 color: #394B5D; 78 text-decoration: none; 79 list-style-type: none; 80} 81/* レスポンシブ */ 82@media(min-width:768px) { 83 .sidebar { 84 z-index: 1; 85 position: absolute; 86 width: 250px; 87 } 88 #page-wrapper { 89 position: inherit; 90 margin-left: 250px; 91 } 92} 93/* 追加 */ 94@media(max-width:991px) { 95.navDrawrBtn2 span { 96 position: absolute; 97 top: 0; 98 bottom: 0; 99 right: 0; 100 margin: auto; 101 display: block; 102 width: 60px; 103 height: 60px; 104 cursor: pointer; 105} 106.navDrawrBtn2 span::before { 107 font-family: FontAwesome; 108 content: "\f0c9"; 109 font-size: 24px; 110 color: #312114; 111 position: absolute; 112 left: 0; 113 width: 100%; 114 text-align: center; 115 line-height: 60px; 116} 117} 118
試したこと
ハンバーグの中身に格納するとこまではいけたのですが、
クリックすると開くのができません。
js
1// ハンバーガー 2$(function () { 3 var $nav = $('.navDrawr'); 4 var $navBtn = $('.navDrawrBtn'); 5 var $speed = 300; 6 var $navW = 270; 7 8 //サブメニューを非表示に 9 $nav.find('.sub').hide(); 10 11 //ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更) 12 $('body').on('click','.navDrawrBtn span',function(){ 13 drawerFunc(); 14 }); 15 16 $('body').on('click','.overlay',function(){ 17 drawerFunc(); 18 }); 19 20 21 function drawerFunc(){ 22 if( $('body').hasClass('menuOpen') ){ 23 $('body').removeClass('menuOpen'); 24 $nav.animate({right:-1*$navW},$speed,'swing'); 25 $('.overlay').fadeOut($speed); 26 }else{ 27 $('body').addClass('menuOpen'); 28 if(!$('.overlay').length){ 29 $('#wrapper').prepend('<div class="overlay"></div>'); 30 } 31 $nav.animate({right:0},$speed,'swing'); 32 $('.overlay').fadeIn($speed); 33 } 34 } 35}); 36
css
1<nav id="global-nav" class="navDrawr"></nav>
回答2件
あなたの回答
tips
プレビュー