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

2020年8月31日 7:38

はじめに

当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近は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だけのほうがシンプルでいいですよね。

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

関連記事

【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方 [...]
2020年8月27日 14:51
【CSS】テキストを領域内に入った部分から徐々に表示
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いてい [...]
2020年8月25日 18:15