Q&A
GridとNavsあたりを組み合わせればフレームワークの機能だけで何とかできそうな気もしますが、その辺りは見てみました？
前提・実現したいこと
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>
うーん、試行錯誤した感じが見受けられないような…。レスポンシブさせたいはずの.sidebarも#page-wrapperもhtmlに入っていませんがコードのコピペだけでできていません？このコード。もう少しどういうことを想定して設定したけどうまくいかなかったかの段階を書かないとやってほしいこと丸投げの質問に見えます。
>mts10806さん bootstrap形のものは見たのですが初心者なものでイマイチ使い方がわかりません。
なるほど。Google翻訳に頼りながらでも公式ドキュメントを一通り読んでもっと基本的なところから理解した方が良いように思います。いきなり自分のできる範囲を大きく超えたところに取り組もうとしすぎているような。1個1個何をやってるか理解できるようにならないとフレームワークは使えるようになりませんよ。
>stampdoor さん レスポンシブはできています。元は違う方が作ったものなのでコピペかどうかは分かりません。助言ありがとうございます。エラーとして追記させていただきますね。
>mts10806さん bootstrapを使わないで今まで作っていたので、勝手がわからないと言いますか…
ではなおさらBootstrapの機能を理解された方が良いです。1から作り直すのとBootstrapを理解して対応するのと、どちらが早くて確実かというところを天秤にかけてみてください。
レスポンシブになっているのはbootstrapの機能によるものです。まずご自身が書いているコードの中身を理解するよう務めましょう。$nav.find('.sub').hide();と書いてありますが.subがhtml内に使われていません。記述のエラー以前の問題になってしまいます。ここで答えだけ書いてもらって解決してもいずれ同じ問題に悩まされますよ。
回答2件
0
仮に前任者から引き継いで、このソースを受け取ったら、ゼロから作り直すと思います。
おそらく、公式ドキュメントに乗っているサンプルからいじった方が工数的に楽かも。
投稿2018/04/11 15:00
退会済みユーザー
総合スコア0
ハンバーガーメニューにしたいものにアコーディオンも入ってるのですが競合したりしないですかね...?
まず、Bootstrapを使っているなら、素直にその設計思想に従うことです。Bootstrap4を使っていながら css に float なんかが出てくる時点でアウト。
しっかりマニュアルを読んで、そのルールに従えば、大抵のレイアウトは実現可能です。
私を含め三流プログラマの力なんて及ばないくらい、よく設計されているものなので、そのルールに従えば良いだけです。
自己解決あなたの回答
tips
プレビュー
