実現したいこと
ヘッダーのハンバーガーメニューは最初黒っぽい背景の上に白色で配置しています。
スクロール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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー