AUTOVICE

TECH BLOG

【CSS】JavaScriptを使わずにハンバーガーメニューを作る

2020-08-31

はじめに

当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。

何よりメニューをまとめられてすっきりした印象になりますし、スペースが広く使えるのでメインメニューだけでなくサブメニューまで網羅的に載せてサイトマップのように表示することもできます。

今回はそんなハンバーガーメニューをJavaScriptを使わずに実装する方法を解説します。

サンプル

右上のハンバーガーメニューをクリックするとフルスクリーンナビゲーションの表示を切り替えられます。

解説

HTML

<input type="checkbox" id="toggle-nav">
<label for="toggle-nav" class="hamburger">
  <div></div>
  <div></div>
  <div></div>
</label>

ハンバーガーメニューにはフォームで使われるチェックボックスを利用します。labelの中の3つのdivがハンバーガーメニューの3本線になります。

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Journal</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

フルスクリーンナビゲーションになる部分です。最初は見えないようにしておき、ハンバーガーメニューをクリックすることで表示を切り替えます。

CSS

.hamburger {
  cursor: pointer;
  position: fixed;
  z-index: 1020;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 14px;
  margin: 0;
  padding: 0;

  div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: background-color .5s, transform .5s;

    &:nth-of-type(2) {
      margin: 4px 0;
    }
  }
}

ハンバーガーメニューを右上に表示します。3本線のうち真ん中のひとつ(&:nth-of-type(2))だけ上下に余白を設けています。

#toggle-nav {
  display: none;

  &:checked {
    ~ .hamburger {
      height: 28px;

      div {
        background-color: #fff;

        &:nth-of-type(1) {
          margin-top: 6px;
          transform: rotate(135deg);
        }
        &:nth-of-type(2) {
          opacity: 0;
        }
        &:nth-of-type(3) {
          margin-top: -12px;
          transform: rotate(-135deg);
        }
      }
    }

    ~ .menu {
      opacity: 1;
      visibility: visible;
    }
  }
}

まず、チェックボックス自体の表示をnoneにします。そして、チェックボックスがチェック状態(&:checked)になったときにハンバーガーメニューを変形させたりフルスクリーンナビゲーションの表示を切り替えています。

起点となるのはチェックボックスですので、CSSのクエリセレクターはチェックボックスからつながるように書く必要があります。

まとめ

ハンバーガーメニューの作り方を解説している記事はたくさんありますが、大抵はJavaScriptでクリックイベントを拾って処理するというやり方です。

しかしハンバーガーメニューくらいならJavaScriptを使わずにCSSだけで作れてしまいます。CSSだけのほうがシンプルでいいですよね。

参考にしてみてください。