LoginSignup
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-29

備忘録です。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2