navbar ハンバーガーからばつ印へ

前提

こちらの記事を真似しています。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件

ベストアンサー

①クリックしてもopenクラスが発生しません。

下記の修正で動作するでしょう。

CSS
1/* .bar1 .open { 下記に修正 */
2.bar1.open {
3    top: 20px;
4    transform: rotate(45deg);
5}
6/* .bar2 .open { 下記に修正 */
7.bar2.open {
8   opacity: 0;
9}
10/* .bar3 .open { 下記に修正 */
11.bar3.open {
12    top: 20px;
13    transform: rotate(-45deg);
14}

JavaScript/jQuery
1$(function() {
2  $('button').click(function() {
3    $('.bar1, .bar2, .bar3').toggleClass('open');
4  })
5});

②.navbar-togglerのborder: 10px solid #444が反映されません。

提示のコードだとそれは反映しています。提示されていない部分に原因があるのでは。
ただ、高さと幅の設定は小さいので、ハンバーガーの三本線がはみ出ています。
質問の画像とは違うので、これは提示されていない部分に原因があるのでしょう。
提示されていない部分のことは回答できません。

投稿2022/10/08 00:19

編集2022/10/08 02:06

hatena19

総合スコア32649

①クリックしてもopenクラスが発生しません

open1、open2、open3というクラスはCSSに定義されてないので、クラスをトグルしたとしても何も起きないと思います。
.barX .openのようにCSS定義されているのでそれぞれのopenをトグルすべきでは。
あと.toggleClass()の引数は「クラス名」なのでセレクタ.classnameの形式で書いてしまうと.classnameというクラスが付きます（簡易動作確認済み）。
https://api.jquery.com/toggleclass/

あとhatena19さんの回答の通り
.barX .openだと「.barX 配下の.open」になるので、.openが動作する位置に指定できてないということになります。
並列指定とするなら.barX.open

②.navbar-togglerのborder: 10px solid #444が反映されません。

手元で提示コードで確認しましたが、反映されていました。
↓画面キャプチャ
イメージ説明

他のCSSが影響しているのではと。

投稿2022/10/08 00:13

編集2022/10/09 23:01

m.ts10806

総合スコア80598

回答へのコメント

m.ts10806

2022/10/09 23:06

どこがどう情報が古くなったのかコメントもらえませんかね。私も最新の情報はぜひとも勉強させていただきたい。 jQueryは質問者が使っているもので、別に古くない、今でも普通に使われているライブラリですが、 jQueryをやめようという流れがあることだけで「古い」と言い切るにはさぞそれだけの根拠をお持ちと見受けられます。もちろん嫌がらせ目的なんかではないですよね？もう1つの回答にも同じ修正依頼をするほどですから。余程の自信があるのでしょう。ぜひとも回答して教えてくださいな。嫌がらせじゃないなら。とりあえず嫌がらせにしか思えないのと同一人物の行為なのは明らかなので通報はしてますが。

m.ts10806

2022/10/09 23:09

修正依頼内容を変更したところでどう回答になってないのか指摘がないとその修正依頼・指摘は成り立ちません。以前の無言低評価と同じ不当な使い方をしているだけのこと。嫌がらせ目的なのは明らかなので、この修正依頼をしている人が既存回答以上の回答をできるとは到底思えません。

あなたの回答