【js不要】HTMLとCSSのみでハンバーガーメニューを実装する方法

2024.05.22

URLをコピーしました！

ハンバーガーメニューを作りたい
CSSだけでハンバーガーメニューを作りたい
JavaScript、jQueryを使えない環境でハンバーガーメニューを実装したい

このような悩みに答えます。

ほとんどのハンバーガーメニューはJavaScript（jQuery）を使って動かしています。

しかし、中にはJavaScriptを使用できない環境であったり、まだ学習が追いついていない方もいるかと思います。

この記事では、CSSのみハンバーガーメニューを実装する方法を解説していきます。

この記事を読めば、CSSのみでハンバーガーメニューを簡単に作成できるようになります。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

実装デモ

時間のない方の為にまずは実装したデモを紹介します。
HTMLとCSSのみで作成しています。

See the Pen Drawer nav CSS only by すずき (@k-suzuki3533) on CodePen.

上記のコードでは、ハンバーガーボタンを<input type="checkbox">に対する<label>タグで作成しています。
チェックボックスの状態を利用し、メニューの開閉を行なっています。

次からは、具体的な作り方を解説していきます。

具体的な実装方法

HTMLを記述

まずはHTMLを書いていきます。

ハンバーガーボタンとして<input type="checkbox">と<label>タグ、そしてハンバーガーメニューを記述します。
ハンバーガーメニューは<nav>を使用しましたが、<div>でも大丈夫です。

<label>タグのfor属性と<input type="checkbox">タグのid属性を同じにすることで、連動させることができます。
今回はdrawer-toggleで連動させています。

これにより、labelタグをクリックすると、inputタグのチェックボックスの状態が切り替わります。

具体的なコードは以下になります。

<header class="header">
  <div class="header_inner">
    <input type="checkbox" id="drawer-toggle" />
    <label for="drawer-toggle" class="drawer_btn">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <nav class="drawer_nav">
　　（省略）
    </nav>
  </div>
</header>

: 入力欄（フォーム入力）要素 – HTML: ハイパーテキストマークアップ言語 | MDN

: ラベル要素 – HTML: ハイパーテキストマークアップ言語 | MDN

CSSを記述

HTMLを書いたら、次にCSSを書いていきます。

開閉時のデザインは、:checkedクラスを使用して切り替えます。

.drawer_nav {
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 0.3s ease;
}
#drawer-toggle:checked + .drawer_btn + .drawer_nav {
  left: 0;
}

上記のコードでは:checked擬似クラスを使用し、inputタグがチェックされたときにメニューが展開されるようにしています。
具体的には、leftを0にすることで、メニューを表示します。

同じように:checked擬似クラスを使用して、ハンバーガーボタンのデザインも調整します。

.drawer_btn > span:first-child {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}
.drawer_btn > span:nth-child(2) {
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.drawer_btn > span:last-child {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}
#drawer-toggle:checked + .drawer_btn > span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#drawer-toggle:checked + .drawer_btn > span:nth-child(2) {
  opacity: 0;
}
#drawer-toggle:checked + .drawer_btn > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

これで開閉時の動作は実装完了です。

最後に全体の見た目を調整して完成です。

:checked – CSS: カスケーディングスタイルシート | MDN

CSSのみ使用した場合のメリット、デメリット

よく使われているJavaScript（jQuery）と比べ、CSSのみのハンバーガーメニューはどのようなメリット・デメリットがあるのかまとめて見ました。

CSSのみで作成するメリット・デメリット

メリット

JavaScriptを使用しないため、コードが簡潔で初心者にも理解しやすい
JavaScriptの読み込みが不要なため、ページの読み込み速度が向上する可能性がある
JavaScriptを無効にしているブラウザでも動作する

デメリット

複雑なインタラクションやアニメーションが難しい
一部のCSSプロパティは古いブラウザでサポートされていない場合がある

適したシチュエーション

初心者のポートフォリオや練習サイト
シンプルなサイト
高速化したいLPなど

JavaScriptも使用して作成するメリット・デメリット

メリット

高度な動作やアニメーションが可能
メニューの動作や表示を細かく制御できる

デメリット

JavaScriptの学習には時間と努力が必要
大量のJavaScriptや外部ライブラリを使用すると、ページの読み込みが遅くなる可能性がある

適したシチュエーション

高度な動作や細かい調整が必要なサイト
ユーザーの行動や設定に応じてメニューの動作を変更したい場合
ブラウザの互換性を確保しつつ、最新の機能を使用したい場合

このように、どちらにもメリット・デメリットがあり一概に「こちらが良い」とは言えません。
案件の内容や実装する環境によって適切なものが変わってきます。

なので、どちらの場合を実装できるようにしておくのがベストかと思います。
jQueryを使用したハンバーガーメニューの実装方法は下記記事でまとめています。

おわりに

CSSのみを使用してハンバーガーメニューを作る方法を解説しました。

<input>タグを使用することで、簡単にハンバーガーメニューを実装することができます。

表示速度を少しでも上げたいサイト、やJavaScriptが使えない環境など、状況によってはこの方法で実装しなければならない時もあるかと思います。

JavaScriptを使った作り方とセットで覚えておくと良いかと思います。

ぜひ試して見て下さい。

URLをコピーしました！