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

6296 ワード
scss JavaScript transform CSS CSS3 CSS テキストリンク

備忘録です。

ハンバーガーメニューをクリックすると、×印に変えるには……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👇