【HTML/CSS/JavaScript】ハンバーガーメニュー⇨2本線が×に

コードペン

https://codepen.io/Yusuke0620/pen/jOJQrp

HTML

      <div class="hamburger_menu">
        <span></span>
        <span></span>
      </div>
      
      <!-- 以下はコードの説明書き -->

      
      ⇧<br>
      ■仕様<br>
      // 1 ハンバーガーメニューがクリックされると全画面の色が変わる<br>
      // 2 ハンバーガーメニューがクリックされるとメニューアイコンの形状変更<br>
      // 3 ハンバーガーメニューがクリックされるとメニューバーが白色に変更<br>

CSS

/*-------------------------------------------
ページ全体のレイアウト
-------------------------------------------*/
body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

/* 解説 
ページ全体のレイアウトなので
ハンバーガーメニューに直接の影響はありません。
グリッドレイアウトでplace-itemsで縦横中央揃え
*/

/*-------------------------------------------
ハンバーガーメニュー大枠
-------------------------------------------*/
.hamburger_menu {
  display: block; 
  position: relative;
  width: 30px; 
  height: 30px; 
  cursor: pointer;
}

/* 解説
アイコン線を格納するための大枠(親要素)です
position: relative;で相対指定
*/

/*-------------------------------------------
ハンバーガーメニューのアイコン線
-------------------------------------------*/
.hamburger_menu span {
  position: absolute;
  background-color: #333333;
  height: 2px; 
  width: 100%;   
  border-radius: 1px;
  transition: all 0.4s ease-in-out;
}

/* 解説
大枠である.hamburger_menuの子要素である全spanに指定
position: absolute;で絶対指定
背景色、高さ、横幅、過度の丸みを指定
transitionで0.4秒かけてease-in-out→徐々に減速指定
*/

/*-------------------------------------------
ハンバーガーメニューのアイコン線
-------------------------------------------*/
/* 平時の位置 */
.hamburger_menu span:nth-of-type(1) {
  top: 10px;
}
.hamburger_menu span:nth-of-type(2) {
  bottom: 10px;
}
/* クリック時に横アイコンが斜めになる */
.hamburger_menu.active span:nth-of-type(1) {
  transform: translateY(4px) rotate(-45deg);
}
.hamburger_menu.active span:nth-of-type(2) {
  transform: translateY(-4px) rotate(45deg);
}

/* 解説
平時の位置では親要素に対して
topとbottomの10pxで固定している
クリック時はactiveセレクタを指定し
nth-of-type(1)はY軸に+4px下に移動し
反時計回りに45°回転
nth-of-type(2)はY軸に4px上に移動し
時計回りに45°回転
 */

/*-------------------------------------------
クリック後の背景色変更※classList用
-------------------------------------------*/
.overlay  {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 解説
overlayは被せるという意味です
JavaScriptのクリックイベント時に背景を薄暗くします
 */

JavaScript

/*-------------------------------------------
// 1 ハンバーガーメニューがクリックされると全画面の色が変わる
// 2 ハンバーガーメニューがクリックされるとメニューアイコンの形状変更
// 3 ハンバーガーメニューがクリックされるとメニューバーが白色に変更
-------------------------------------------*/
const hamburgerMenu = document.querySelector(".hamburger_menu"); //定数menuに.hamburger_menuセレクタを代入
const body = document.querySelector("body"); //定数bodyにbodyを代入
const menuSpan = document.querySelectorAll(".hamburger_menu span");

  /* 
  ハンバーガーメニューがクリックされたら
  定数hamburgerMenuにactiveセレクタを代入
  定数bodyにoverlay セレクタを代入
  */
  hamburgerMenu.addEventListener("click", () => {
    hamburgerMenu.classList.toggle("active"); // メニューアイコンの形状変更
    body.classList.toggle("overlay"); //背景色変更

    /* spanは複数あるためforEachを使用し、span要素の集合に対して繰り返し処理を行う */    
    menuSpan.forEach(span => {

      /* 
      メニューがクリックされclassListが追加されたら
      #fff(true)、削除されたら#333(false)
      メニューバーの色を切り替える

      classList.containsメソッドは引数として与えられた要素(active)が含まれているかどうかチェック
      含まれているなら#fff色に、含まれていないなら#333色に
      */     
      span.style.backgroundColor = hamburgerMenu.classList.contains("active") ? "#fff" : "#333333";
    });
  });