【CSS & JS】超簡単。ハンバーガーアイコンをクリックして×に変える＆メニューをスライドアウトさせる方法

備忘録です。

ハンバーガーメニューをクリックすると、×印に変えるには……CSSでつくる方法もあるらしいけど、どうやるんだろう。密かにずっと気になっていたので調べてみました。

JavaScriptも使いますが、決してややこしいことはしなくていい方法を見つけました。

ここでは二つのことをします。
❶ハンバーガーにクリックすることで×印に変える
❷メニューを画面の右側からスライドアウトさせる

まずはHTMLから。

### HTML

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/styles.css" />
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <title>Slide Out Menu</title>
  </head>
  <body>
    <header>
      <nav>
        <div class="burger-menu-icon">//①ハンバーガーのdivをつくる
          <input type="checkbox" id="burger" />//②Toggleするためにはcheckboxを書く！ここがカギ！
          <label for="burger">//③label forはinputのidとそろえる。
            <div class="burger-icon">
              <span></span>
              <span></span>
              <span></span>
            </div>//④labelのなかにハンバーガーアイコンを入れましょう。
          </label>
          <div class="slideoutMenu">//⑤スライドアウトさせるメニューは、.burger-menu-iconのdiv内におさめます。
            <div class="opacity"></div>
            <div class="menu">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Style</a></li>
                <li><a href="#">Reviews</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <script src="script.js"></script>
  </body>
</html>
```

#### ポイント❶
toggleするには`input type="checkbox"`を使う

#### ポイント❷
今回はハンバーガーアイコンをクリックすることで、メニューを引っ張り出したいです。なのでハンバーガーアイコンは、`<label for="burger"></label>`のなかに入れましょう。通常であればcheckboxをチェックしなければ、checkboxにチェックはつきませんが、label forというものを付け加えると、label forの中身をクリックするだけでcheckboxにcheckがつけられます。ただし`label for="burger"`と、`input id="burger"`labelをinputと紐づけるには、この二つをそろえる必要があります。inputは必ずidで指定します。

#### ポイント❸
ハンバーガーアイコンと隠しているメニューは、同じdiv内に入れる。（この場合は`.burger-menu-icon`）

### SCSS 

```
.burger-icon {
  display: block;
  z-index: 11;
}

.burger-icon span { //ここでburger-iconをつくる
  display: block;
  background: #000; //background-colorではなく、backgroundで指定
  width: 50px;
  height: 5px;
  margin-bottom: 10px;
  margin-left: 90%;
  cursor: pointer;
  position: relative;
  top: 0;
}

input#burger { //labelここでcheckboxを消す
  display: none;
}

.burger-icon.open span:nth-child(2) { //クリックすると'open'というクラスがtoggleされるよう、JSに記述しています。つまり、これはハンバーガーをクリックするとハンバーガーの2本目の線が消えるという記述です。
  width: 0;
  opacity: 0;
}

.burger-icon.open span:nth-child(1) {　//これはハンバーガーをクリックするとハンバーガーの1本目の線が45度回転し、上から15px下方向にずらすという記述です。
  transform: rotate(45deg);
  top: 15px;
}

.burger-icon.open span:nth-child(3) {//これはハンバーガーをクリックするとハンバーガーの3本目の線が-45度回転し、15px上方向にずらすという記述です。
  transform: rotate(-45deg);
  top: -15px;
}

.slideoutMenu {
  transform: translateX(100%); //メニューを右に100%ずらすことで、画面から消す。
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.3s;
  animation: slideOut 0.3s;
  .opacity,
  .menu {
    width: 50%;
    background-color: #5d348c;
    ul {
      list-style: none;
      li {
        padding-bottom: 3rem;
      }
      li a {
        text-decoration: none;
        font-size: 3rem;
        color: #ea5c5d;
        text-transform: uppercase;
      }
    }
  }
  .opacity {
    background-color: #ea5c5d;
    opacity: 0.7;
  }
}

@keyframes slideOut {　//ここでスライドの動作をつくります。（slideIn、のほうがふさわしかったかも T_T ）
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translatex(50%);
  }
  50% {
    transform: translatex(0%);
  }
}

input:checked ~ .slideoutMenu { //これがツワモノ！！！詳細は【覚えておきたいポイント3】で。
  transform: translateX(0%);
}
```

#### 覚えておきたいポイント❶
`<input>`タグのあとに`<label for="burger">`を付け足しておけば、`label`タグ内の要素をクリックすることでcheckboxをチェックできるようになります。

#### 覚えたいおきたいポイント❷
`.burger-icon.open span:nth-child(3), .burger-icon.open span:nth-child(1)`ではハンバーガーの上の線と下の線を回転させ、`top:〜`で位置をずらしています。topの位置をずらすには、`.burger-icon span`に`position: relative; top: 0;`と書かないと効かないので注意です。

#### 覚えたいおきたいポイント❸
最後にある`input:checked ~ .slideoutMenu`を書くことで、メニューが右側から画面にスライドインしてくれます。
`input:checked`は、「チェックボックスがcheckされていたら……」という意味です。`~`は、兄弟要素を取得したいよ〜という意味合いを持つ記号です。`input`と`.slideoutMenu`はどちらとも`burger-menu-icon`の子要素なので、兄弟要素に値します。`~`がないと効かないので注意です。

### JS

```
$(".burger-icon").click(function() {
  $(this).toggleClass("open");
});
```

JSではシンプルに、「`.burger-icon`のクリックで、`open`というclassをtoggleしてね」と伝えているだけです。

やりかたは何通りもあると思うのですが、個人的にはこれが一番わかりやすいかなと感じました。


完成版のgif👇
![Screen Recording 2020-03-29 at 04.31 PM.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602558/e390e09d-1872-08cb-9c5a-d8824a6e14a8.gif)