前提
こちらの記事を真似しています。https://konpure.com/2019/04/28/post-10826/
実現したいこと
navbarの三本線をクリックしたらバツに変更させたいです。
発生している問題・エラーメッセージ
①クリックしてもopenクラスが発生しません。
②.navbar-togglerのborder: 10px solid #444が反映されません。
記事では親要素がdivで私のはbuttonなのが原因なのでしょうか?
該当のソースコード
html
1 <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-gradient"> 2 <div class="container-fluid"> 3 <a class="navbar-brand" href="">yoriss67</a> 4 5 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 6 data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" 7 aria-label="Toggle navigation"> 8 <span class="navbar-toggler-icon bar1 open1"></span> 9 <span class="navbar-toggler-icon bar2 open2"></span> 10 <span class="navbar-toggler-icon bar3 open3"></span> 11 12 </button> 13 14 <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 15 16 <ul class="nav navbar-nav ms-auto flex-row "> 17 <li class="nav-item pl-3"> 18 19 20 <a class="fa-brands fa-2x fa-github" href="https://github.com/yoriss67" target="_blank"></a> 21 22 23 <!-- <a class="nav-link" href="">Contact</a> --> 24 </li> 25 <li class="nav-item pl-3"> 26 27 <a class="fa-brands fa-2x fa-twitter" href="https://twitter.com/iori73wsy" target="_blank"></a> 28 29 <!-- <a class="nav-link" href="">Pricing</a> --> 30 </li> 31 <li class="nav-item pl-3"> 32 <a class="fa-brands fa-2x fa-instagram" href="https://www.instagram.com/ioriiii_13/" target="_blank"></a> 33 34 <!-- <a class="nav-link" href="">Download</a> --> 35 </li> 36 37 38 <li class="nav-item pl-3"><a href="#aboutme">About me</a></li> 39 40 <li class="nav-item pl-3"><a href="#works">Works</a></li> 41 42 <li class="nav-item pl-3"><a href="#skill">Skills&Tools</a> </li> 43 44 <li class="nav-item pl-3"><a href="#contact"> Contact</a></li> 45 46 47 </ul> 48 </div> 49 50 </div> 51 </nav> 52 53
css
1/* hamburger */ 2 3 .navbar-toggler { 4 position: relative; 5 width: 50px; 6 height: 50px; 7 border: 10px solid #444; 8 box-sizing: border-box; 9} 10 11.navbar-toggler-icon { 12 display: block; 13 width: 30px; 14 height: 5px; 15 background: #444; 16 position: absolute; 17 left: 10px; 18 transition: all 0.5s ease; 19} 20 21.bar1 { 22 top: 6.25px; 23 background-color: blue; 24 } 25 .bar2 { 26 top: 17.5px; 27 top: 20px; 28 background-color: yellow; 29 } 30 .bar3 { 31 bottom: 6.25px; 32 /* bottom: 20px; */ 33 background-color: red; 34 } 35/* 36 ハンバーガーメニューがクリックされたら 37 上の線を真ん中に移動させて45℃回転 38*/ 39 40.bar1 .open { 41 top: 20px; 42 transform: rotate(45deg); 43} 44 45.bar2 .open { 46 opacity: 0; 47} 48 49.bar3 .open { 50 top: 20px; 51 transform: rotate(-45deg); 52} 53 54
JavaScript
1// hamburger 2 3$(function() { 4 $('button').click(function() { 5 $('.bar1, .bar2, .bar3').toggleClass('.open1, .open2, .open3'); 6 }) 7}); 8
試したこと
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
解決しました!
html
1 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 2 data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" 3 aria-label="Toggle navigation"> 4 <span class="navbar-toggler-icon bar1 open"></span> 5 <span class="navbar-toggler-icon bar2 open"></span> 6 <span class="navbar-toggler-icon bar3 open"></span> 7 8 </button>
css
1/* hamburger */ 2 3.navbar-dark .navbar-toggler { 4 /* border-color: rgb(0, 0, 0); */ 5} 6 7 8 9 .navbar-dark .navbar-toggler { 10 position: relative; 11 width: 50px; 12 height: 50px; 13 border: 5px solid #444; 14 box-sizing: border-box; 15} 16 17.navbar-toggler-icon { 18 display: block; 19 width: 30px; 20 height: 5px; 21 background: #444; 22 position: absolute; 23 left: 10px; 24 transition: all 0.5s ease; 25} 26 27.bar1 { 28 top: 6.25px; 29 background-color: blue; 30 } 31 .bar2 { 32 top: 17.5px; 33 top: 20px; 34 background-color: yellow; 35 } 36 .bar3 { 37 bottom: 6.25px; 38 /* bottom: 20px; */ 39 background-color: red; 40 } 41 42/* 43 ハンバーガーメニューがクリックされたら 44 上の線を真ん中に移動させて45℃回転 45*/ 46 47.bar1.open { 48 top: 20px; 49 transform: rotate(45deg); 50} 51 52.bar2.open { 53 opacity: 0; 54} 55 56.bar3.open { 57 top: 20px; 58 transform: rotate(-45deg); 59}
js
1// hamburger 2 3$(function() { 4 $('.navbar-toggler').click(function() { 5 $('.bar1, .bar2, .bar3').toggleClass('open'); 6 }) 7});
ご指摘の通りクラスをopen にしてCSSを.bar数字.openでスペースなしで詰めました!
borderに関しては下にあった
css
1.navbar-dark .navbar-toggler
が邪魔していたのだと思います。
お答えいただいた皆さんありがとうございました!
今開いてみると...
数時間前には正常に機能していたのですが、今確認してみると逆になっていました。クリック前がばつ印でクリック後が三本線になります。コードは解決したときと同じです。また時間が経てば戻るでしょうか?
css
1/* hamburger */ 2 3.navbar-dark .navbar-toggler { 4 /* border-color: rgb(0, 0, 0); */ 5} 6 7 8 9 .navbar-dark .navbar-toggler { 10 position: relative; 11 width: 50px; 12 height: 50px; 13 /* border: 5px solid #444; */ 14 box-sizing: border-box; 15} 16 17.navbar-toggler-icon { 18 display: block; 19 width: 30px; 20 height: 3px; 21 background: #444; 22 position: absolute; 23 left: 10px; 24 transition: all 0.5s ease; 25} 26 27.bar1 { 28 /* top: 6.25px; */ 29 top: 8px; 30 background-color:#000; 31 } 32 .bar2 { 33 top: 17.5px; 34 top: 20px; 35 background-color:#000; 36 } 37 .bar3 { 38 /* bottom: 6.25px; */ 39 bottom: 12px; 40 /* bottom: 20px; */ 41 background-color:#000; 42 } 43 44/* 45 ハンバーガーメニューがクリックされたら 46 上の線を真ん中に移動させて45℃回転 47*/ 48 49.bar1.open { 50 top: 20px; 51 transform: rotate(45deg); 52} 53 54.bar2.open { 55 opacity: 0; 56} 57 58.bar3.open { 59 top: 20px; 60 transform: rotate(-45deg); 61}
JavaScript
1$(function() { 2 $('.navbar-toggler').click(function() { 3 $('.bar1, .bar2, .bar3').toggleClass('open'); 4 }) 5}); 6
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。