SPmenuの開いた時のみ閉じるボタンの色を変えたい

実現したいこと

ヘッダーのハンバーガーメニューは最初黒っぽい背景の上に白色で配置しています。
スクロール80px以上になると背景が白に変わり、ハンバーガーメニューは黒に変わります。

スクロールせずにハンバーガーメニューを開けると、spmenuの黒い背景の上に閉じるボタンは白なので問題ないのですが、スクロール80px以上だと黒い背景の上に黒い閉じるボタンとなってしまい、困りました。SPmenuの開いた時は閉じるボタンの色を白色に変えたいです。

前提

調べてもわからなかったので、わかる方おられましたら教えていただけませんか。

該当のソースコード

HTML
1  <header class="header">
2        <div class="header__inner">
3            <h1 class="header__logo"><a href="#top"><img src="img/top-header-logo@2x.png" alt=""></a></h1>
4            <!-- /.header__logo -->
5
6   
7
8            <div class="reserve-btn__wrapper">
9                <botton class="btn reserve-btn">
10                    <a href=#">
11                        <img src="img/calender@2x.png" alt="">
12                        <span>宿泊予約</span>
13                    </a>
14                </botton>
15
16           
17
18
19            <!-- for SP -->
20            <button class="hamburger spmenu-hamburger" id="hamburger" aria-label="メニューを開く" aria-controls="spmenu" aria-expanded="false">
21                <span class="hamburger__line" aria-hidden="true"></span>
22                <span class="hamburger__txt">メニュー</span>
23            </button><!-- /.hamburger -->
24        </div><!-- /.header__inner -->
25
26        <nav class="spmenu" id="spmenu" aria-label="スマホ用メニュー">
27
28            <div class="spmenu__inner">
29                <h1 class="header__logo--sp"><a href="#"><img src="img/top-header-logo@2x.png" alt=""></a>
30                </h1>
31                <p class="spmenu__nav-ttl">contents</p><!-- /.spmenu__nav-ttl-->
32                <ul class="spmenu__list">
33                    <li class="spmenu__item"><a href="room.html" class="spmenu__link">お部屋</a></li>
34                    <li class="spmenu__item"><a href="menu.html" class="spmenu__link">お料理</a></li>
35        
36
37                </ul><!-- /.spmenu__list -->
38
39          
40              
41            </div><!-- /.spmenu__inner -->
42
43        </nav><!-- /.spmenu -->
44    </header><!-- /.header -->

SCSS
1.hamburger {
2    margin-left: auto;
3    margin-right: -20px;
4    cursor: pointer;
5    width: 70px;
6    height: 70px;
7    padding-top: 15px;
8    border: 0;
9    z-index: 10000;
10    margin-left: 0;
11    display: flex;
12    flex-direction: column;
13    justify-content: center;
14    align-items: center;
15    background: transparent;
16
17}
18
19.hamburger__line {
20    position: relative;
21    width: 30px;
22    height: 2px;
23    background: #fff;
24}
25
26.hamburger__line::before,
27.hamburger__line::after {
28    position: absolute;
29    content: "";
30    display: block;
31    width: 30px;
32    background: #fff;
33    height: 2px;
34    transition: transform 0.3s;
35}
36
37.hamburger__line::before {
38    top: -8px;
39}
40
41.hamburger__line::after {
42    bottom: -8px;
43}
44
45.hamburger__txt {
46    color: #fff;
47    margin-top: 12px;
48    font-size: 11px;
49    text-transform: uppercase;
50}
51
52
53/*閉じる*/
54/*aria-expandedの状態でスタイルを適用*/
55.hamburger[aria-expanded="true"] .hamburger__line {
56    background: transparent;
57}
58
59.hamburger[aria-expanded="true"] .hamburger__line::before {
60    top: 0;
61    transform: rotate(45deg);
62}
63
64.hamburger[aria-expanded="true"] .hamburger__line::after {
65    bottom: 0;
66    transform: rotate(-45deg);
67}
68
69@include medium {
70    .hamburger {
71        display: none;
72    }
73}
74
75/* headerスクロール時
76------------------------------------------------------ */
77.is-color {
78
79    .hamburger__line {
80        background: #000;
81    }
82
83    .hamburger__line::before,
84    .hamburger__line::after {
85        background: #000;
86    }
87
88    .hamburger__txt {
89        color: #000;
90    }
91
92    .hamburger[aria-expanded="true"] .hamburger__line {
93        background: transparent;
94    }
95}

jQuery
1$(function () {
2    var headNav = $("header");
3    /* 初期表示、スクロール時にイベント開始 */
4    $(window).on("load scroll", function () {
5        /* スクロール位置の高さが80pxより大きい、かつis-fixedクラスがない場合 */
6        if ($(this).scrollTop() > 80 && headNav.hasClass("is-fixed") == false) {
7            headNav.css("display", "block");
8            headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */
9            headNav.addClass("is-fixed");
10            headNav.animate({ "top": 0 }, 600);
11            $('.header__logo a').children('img').attr('src', 'img/sub-header-logo.png');
12            $('.hamburger').addClass("is-color");
13        }
14        /* スクロール位置の高さが80pxより小さい、かつis-fixedクラスがある場合 */
15        else if ($(this).scrollTop() < 80 && headNav.hasClass("is-fixed") == true) {
16            headNav.removeClass("is-fixed");
17            $('.header__logo a').children('img').attr('src', 'img/top-header-logo@2x.png');
18            $('.hamburger').removeClass("is-color");
19
20        }
21    });
22});

試したこと

最初、閉じるボタンで.hamburger[aria-expanded="true"] .hamburger__line::beforeと::afterに＃FFFを指定したのですが、変わらなかったです。
/閉じる/
.hamburger[aria-expanded="true"] .hamburger__line::before {
top: 0;
transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__line::after {
bottom: 0;
transform: rotate(-45deg);
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2023/06/09 06:12

実際のコードではハンバーガーメニューをクリックするとなにかが表示される感じなのですか？

spn

2023/06/09 07:43

語彙力なくてすみません！ハンバーガーメニューをクリックするとSPmenuが出てくるのですが、背景が黒なので黒被りしてしまい、困っていました。解決いたしました。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？

scss
1.is-color {
2  .hamburger__line {
3    background: #000;
4  }
5
6  .hamburger__line::before,
7  .hamburger__line::after {
8    background: #000;
9  }
10
11  .hamburger__txt {
12    color: #000;
13  }
14
15  &.hamburger[aria-expanded="true"] {
16    .hamburger__line {
17      background: transparent;
18      &::after,
19      &::before {
20        background: #fff;
21      }
22    }
23  }
24}