【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+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26
【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54