ハンバーガーメニューって、いくつも種類があるけど、自分のサイトにはどれが合うんだろう？

「基本の開閉型」「スライド型」「フルスクリーン型」など、ハンバーガーメニューには様々な動作パターンがあります。それぞれ見た目の印象も実装の難しさも違うので、用途に合わないものを選ぶと後から作り直しになることも。

この記事では、CSS×JSで実装できるハンバーガーメニューを動作パターン別に分類し、それぞれの特徴・向いているサイト・最小構成のコード例をまとめました。全パターンにコピペできる最小コード例とGitHub Pagesのデモ付きです。「どのタイプを選べばいいか分からない」という方が、自分の用途に合うパターンを見つけられる記事になっています。

各パターンの詳しい実装解説は個別記事にまとめているので、気になるパターンが見つかったらそちらも合わせてご覧ください。

目次
  1. ハンバーガーメニュー7種類 — 比較一覧
  2. グループA — その場で開くタイプ
  3. グループB — スライドで現れるタイプ
  4. グループC — 画面全体を使うタイプ
  5. まとめ

ハンバーガーメニュー7種類 — 比較一覧

まずは全パターンを一覧で比較します。自分に合いそうなパターンを見つけたら、パターン名のリンクから詳細セクションへ飛べます。

パターン名出現方向演出の派手さ実装の難易度向いているサイト
基本型その場★☆☆★☆☆コーポレート、ブログ
スライドダウン型上から★★☆★★☆LP、ブランドサイト
右スライドイン型右から（全画面）★★☆★★☆サービスサイト、EC
ドロワー型右から（部分）★★☆★★★実案件全般（最も汎用的）
push型右から（押し出し）★★☆★★☆アプリ風UI、管理画面
フルスクリーン型全画面★★★★★☆ポートフォリオ、クリエイティブ系
円形展開型（FAB型）右下から★★★★★★ポートフォリオ、個性重視のサイト

迷ったらこれ — 用途別クイックガイド

「どれが一番いい」という正解はありません。大切なのは、サイトの目的と雰囲気に合うものを選ぶことです。以下の表を参考に、自分の用途に近いものから試してみてください。

利用シーンおすすめ理由
学習・練習用（初心者の第一歩）基本型構造がシンプルで理解しやすい
コーポレートサイト基本型 or ドロワー型シンプルで信頼感がある。実案件レベルならドロワー型
実案件全般（迷ったらこれ）ドロワー型オーバーレイ・スクロールロック・フォーカストラップ完備で最も実践的
ECサイト・サービスサイト右スライドイン型 or ドロワー型ナビ項目が多い場合に向いている
LP（ランディングページ）スライドダウン型ファーストビューを活かしつつ、印象的なナビ演出
Webアプリ風UIpush型ネイティブアプリの操作感を再現できる
ポートフォリオ・クリエイティブ系フルスクリーン型 or 円形展開型個性と印象を重視。自己表現の場にふさわしい

グループA — その場で開くタイプ

基本型 — シンプルな開閉ハンバーガーメニュー

ボタンをクリックするとヘッダー直下にナビが現れ、3本線が×に変形します。最もシンプルで分かりやすい動作パターンです。「あ、これ見たことある」という方が一番多いのがこのタイプだと思います。

向いているサイト

  • コーポレートサイト、ブログ — 装飾控えめで内容重視のサイト全般に合います
  • 学習・練習用 — 構造がシンプルで理解しやすく、最初の一歩に最適です

注意点

  • 演出が控えめなため、ビジュアルのインパクトを求める場合は他のパターンが適しています
  • 下記の最小コード例はアニメーションなしの即時開閉です。フェード等のアニメーションを加えたい場合は個別記事をご覧ください

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header>
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
  <nav class="nav">
    <ul>
      <li><a href="#">TOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>
CSS
/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ナビ */
.nav {
  display: none;
}
.nav.is-open {
  display: block;
}
OPEN
JavaScript
const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("is-active");
  nav.classList.toggle("is-open");
});

詳しい解説はこちら: CSSとJSだけで作るハンバーガーメニュー【コピペで使えるスニペット付き】

グループB — スライドで現れるタイプ

スライド系には複数のバリエーションがあります。出現方向（上から / 右から）、画面の覆い方（全画面 / 部分）、コンテンツへの影響（押し出すか / 重ねるか）が異なります。どれも transform によるスライドアニメーションが核ですが、演出と使いどころが違います。

スライドダウン型 — ヘッダー背面から降りるナビ

ヘッダーの背面から全画面ナビが上方向からスーッとスライドダウンして降りてきます。ヘッダーは常に最前面に残るので、ロゴや×ボタンがメニュー展開中も操作できます。モダンで印象的な演出です。

向いているサイト

  • LP、ブランドサイト — ファーストビューの演出を大切にしたいサイト
  • キャンペーンページ — 特別感のある導線を作りたい場面に

注意点

  • 全画面を覆うため、ナビ項目が少ないと間延びする可能性があります

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header class="header">
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

<nav class="slidedown-nav">
  <ul>
    <li><a href="#">TOP</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
CSS
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  height: 60px;
}

/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* スライドダウンナビ */
.slidedown-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15; /* ヘッダー(20)より下 = 背面から出る演出 */
  background: #fff;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.slidedown-nav.is-open {
  transform: translateY(0);
}
OPEN
JavaScript
const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".slidedown-nav");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("is-active");
  nav.classList.toggle("is-open");
});

詳しい解説はこちら: スライドダウン型ハンバーガーメニューの作り方｜ヘッダー背面から全画面ナビが降りる演出をCSS×JSで実装【コピペOK】

右スライドイン型 — 右から全画面でスライド

画面右端から左方向に白いナビゲーションが滑り込み、全画面を覆います。ナビが画面いっぱいに広がっても、ヘッダー（ロゴ＋×ボタン）は常に前面に浮かんだまま操作できます。z-index の階層設計がポイントのパターンです。

向いているサイト

  • サービスサイト、EC — ナビ項目が多く、ヘッダーの視認性を保ちたいサイト
  • コーポレートサイト — 横方向のスライドで洗練された印象を出したい場合に

注意点

  • z-index の階層設計が必要です。ヘッダーとナビの重なり順を正しく設計しないと表示が崩れます

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header class="header">
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

<nav class="slidein-nav">
  <ul>
    <li><a href="#">TOP</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
CSS
.header {
  position: sticky;
  top: 0;
  z-index: 50; /* ナビ(40)より上 = 常に前面 */
  background: #fff;
  height: 60px;
}

/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 右スライドインナビ */
.slidein-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 40;
  background: #fff;
  padding-top: 60px; /* ヘッダー分の余白 */
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.slidein-nav.is-open {
  transform: translateX(0);
}
OPEN
JavaScript
const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".slidein-nav");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("is-active");
  nav.classList.toggle("is-open");
});

詳しい解説はこちら: 右から左にスライドインする全画面ハンバーガーメニューの作り方｜ヘッダー常時表示＆z-index階層設計【コピペOK】

ドロワー型 — オーバーレイ付きサイドパネル

右から280px幅のサイドパネルがスライドインし、背景に半透明のオーバーレイ（暗幕）が表示されます。オーバーレイクリックで閉じる、スクロールロック、フォーカストラップと、実案件に必要な機能がひととおり揃った最も汎用的なパターンです。

向いているサイト

  • 実案件全般 — クライアントワークの第一候補として安心して使えます
  • ECサイト、サービスサイト — ナビ項目が多くても収まるサイドパネル形式です

注意点

  • オーバーレイ・スクロールロック・フォーカストラップと実装量が多めです。ただし個別記事で詳しく解説しています

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header>
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

<div class="overlay"></div>

<nav class="drawer">
  <ul>
    <li><a href="#">TOP</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
CSS
/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* オーバーレイ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ドロワー */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: 280px;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.drawer.is-open {
  transform: translateX(0);
}
Expand
JavaScript
const hamburger = document.querySelector(".hamburger");
const drawer = document.querySelector(".drawer");
const overlay = document.querySelector(".overlay");

function open() {
  hamburger.classList.add("is-active");
  drawer.classList.add("is-open");
  overlay.classList.add("is-visible");
  document.body.style.overflow = "hidden"; /* スクロールロック */
}

function close() {
  hamburger.classList.remove("is-active");
  drawer.classList.remove("is-open");
  overlay.classList.remove("is-visible");
  document.body.style.overflow = "";
}

hamburger.addEventListener("click", () => {
  drawer.classList.contains("is-open") ? close() : open();
});

overlay.addEventListener("click", close);
OPEN

詳しい解説はこちら: ドロワーメニューの作り方｜オーバーレイ・スクロールロック・フォーカストラップまで徹底解説【コピペOK】

push型 — コンテンツを横に押し出す

ボタンを押すとページコンテンツ全体が左に280pxスライドし、右側にナビが現れます。ナビが「上に重なる」のではなく、コンテンツのほうが「左に逃げる」のが特徴です。ネイティブアプリの操作感に近い動きが作れます。

向いているサイト

  • Webアプリ風UI、管理画面 — ネイティブアプリの操作感を再現したいサイト
  • モバイルファーストのサービス — スマホでの使いやすさを重視する場合に

注意点

  • translateX でラッパーごと移動させるため、ラッパー内に position: fixed の要素があると一緒に移動してしまい、固定位置がずれることがあります

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header class="header">
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

<div class="push-wrapper">
  <main>ページコンテンツ</main>
</div>

<nav class="push-nav">
  <ul>
    <li><a href="#">TOP</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
CSS
/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  background: #fff;
  height: 60px;
}

/* ページコンテンツラッパー */
.push-wrapper {
  padding-top: 60px; /* 固定ヘッダー分 */
  transition: transform 0.3s ease;
}
.push-wrapper.is-pushed {
  transform: translateX(-280px);
}

/* プッシュナビ */
.push-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: 280px;
  height: 100%;
  background: #2c2c2c;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.push-nav.is-open {
  transform: translateX(0);
}
OPEN
JavaScript
const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".push-nav");
const wrapper = document.querySelector(".push-wrapper");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("is-active");
  nav.classList.toggle("is-open");
  wrapper.classList.toggle("is-pushed");
});

詳しい解説はこちら: push型ハンバーガーメニューの作り方｜ページコンテンツが左にスライドする実装【コピペOK】

グループC — 画面全体を使うタイプ

フルスクリーン型 — 全画面メニュー

全画面をダークな背景で覆い、リンクがスタッガードアニメーション（時間差）で1つずつスライドアップしながら出現します。ヘッダーはメニューの上に浮かぶ設計で、ロゴと×ボタンが白色に変わるのも見どころです。インパクトの強い演出が欲しいサイトに向いています。

向いているサイト

  • ポートフォリオ、クリエイティブ系 — メニュー自体を「体験」として見せたいサイト
  • デザイン事務所 — 世界観を強く打ち出したい場合に

注意点

  • スタッガードアニメーションの transition-delay を項目数に合わせて調整する必要があります

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<header class="header">
  <button class="hamburger" type="button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

<nav class="fullscreen-nav">
  <ul>
    <li class="nav-item"><a href="#">TOP</a></li>
    <li class="nav-item"><a href="#">ABOUT</a></li>
    <li class="nav-item"><a href="#">WORKS</a></li>
    <li class="nav-item"><a href="#">CONTACT</a></li>
  </ul>
</nav>
CSS
.header {
  position: sticky;
  top: 0;
  z-index: 40; /* ナビ(30)より上 */
  background: #fff;
  height: 60px;
  transition: background-color 0.3s;
}
.header.is-menu-open {
  background: transparent;
}

/* ハンバーガーボタン */
.hamburger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* × 変形 */
.hamburger.is-active .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* メニュー展開時: ボタンの線を白に */
.header.is-menu-open .line {
  background: #fff;
}

/* フルスクリーンナビ */
.fullscreen-nav {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 20, 20, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.fullscreen-nav.is-open {
  opacity: 1;
  visibility: visible;
}

/* スタッガードアニメーション */
.nav-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.fullscreen-nav.is-open .nav-item:nth-child(1) { transition-delay: 0.06s; }
.fullscreen-nav.is-open .nav-item:nth-child(2) { transition-delay: 0.12s; }
.fullscreen-nav.is-open .nav-item:nth-child(3) { transition-delay: 0.18s; }
.fullscreen-nav.is-open .nav-item:nth-child(4) { transition-delay: 0.24s; }

.fullscreen-nav.is-open .nav-item {
  opacity: 1;
  transform: translateY(0);
}

/* ナビリンク */
.fullscreen-nav a {
  color: #fff;
  text-decoration: none;
}
OPEN
JavaScript
const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".fullscreen-nav");
const header = document.querySelector(".header");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("is-active");
  nav.classList.toggle("is-open");
  header.classList.toggle("is-menu-open");
});

詳しい解説はこちら: フルスクリーンメニューの作り方｜CSS×JSで実装【コピペOK】

円形展開型（FAB型） — 右下から円形に広がる

画面右下に浮かぶFAB（Floating Action Button）をクリックすると、ボタンを起点にダークな円形背景がふわっと画面全体へ広がり、続いてリンクが時間差で順番にスライドアップして出現します。2段階アニメーションで、今回紹介するパターンの中で最も個性的な演出です。

向いているサイト

  • ポートフォリオ、アート系 — 他のサイトと被りたくない場合に最適です
  • 個人ブログ — 自分の個性を強く出したいサイトに

注意点

  • clip-path: circle() や cubic-bezier など、CSSアニメーションの知識がやや多めに必要です。今回紹介するパターンの中で最も実装が複雑です

デモ: 動作を確認する（GitHub Pages）

最小コード例

HTML
<div class="expand-bg"></div>

<nav class="expand-nav">
  <ul>
    <li class="nav-item"><a href="#">TOP</a></li>
    <li class="nav-item"><a href="#">ABOUT</a></li>
    <li class="nav-item"><a href="#">WORKS</a></li>
    <li class="nav-item"><a href="#">CONTACT</a></li>
  </ul>
</nav>

<button class="fab" type="button">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</button>
CSS
/* FABボタン */
.fab {
  appearance: none;
  border: none;
  cursor: pointer;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #333;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}
.fab .line {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* FAB × 変形（基本型と同様） */
.fab.is-active .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fab.is-active .line:nth-child(2) { opacity: 0; }
.fab.is-active .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 円形背景 */
.expand-bg {
  position: fixed;
  z-index: 30;
  bottom: calc(24px + 28px); /* FAB中心 */
  right: calc(24px + 28px);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.95);
  transform: translate(50%, 50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}
.expand-bg.is-expanding {
  width: 300vmax;
  height: 300vmax;
  transform: translate(50%, 50%) scale(1);
  opacity: 1;
}

/* 展開ナビ */
.expand-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}
.expand-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* スタッガード（フルスクリーン型と同様） */
.expand-nav .nav-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.expand-nav.is-open .nav-item:nth-child(1) { transition-delay: 0.1s; }
.expand-nav.is-open .nav-item:nth-child(2) { transition-delay: 0.16s; }
.expand-nav.is-open .nav-item:nth-child(3) { transition-delay: 0.22s; }
.expand-nav.is-open .nav-item:nth-child(4) { transition-delay: 0.28s; }
.expand-nav.is-open .nav-item { opacity: 1; transform: translateY(0); }

/* ナビリンク */
.expand-nav a {
  color: #fff;
  text-decoration: none;
}
OPEN
JavaScript
const fab = document.querySelector(".fab");
const bg = document.querySelector(".expand-bg");
const nav = document.querySelector(".expand-nav");

fab.addEventListener("click", () => {
  const isOpen = fab.classList.contains("is-active");
  if (isOpen) {
    nav.classList.remove("is-open");
    setTimeout(() => {
      bg.classList.remove("is-expanding");
      fab.classList.remove("is-active");
    }, 200);
  } else {
    fab.classList.add("is-active");
    bg.classList.add("is-expanding");
    setTimeout(() => {
      nav.classList.add("is-open");
    }, 300);
  }
});

詳しい解説はこちら: 右下から円形に広がるハンバーガーメニューの作り方｜FAB＋2段階アニメーションをCSS×JSで実装【コピペOK】

まとめ

この記事では、CSS×JSで作れるハンバーガーメニューを動作パターン別に紹介しました。

  • 基本型 — シンプルな開閉。初学者の第一歩に
  • スライドダウン型 — ヘッダー背面から降りる全画面ナビ
  • 右スライドイン型 — 右からスライドする全画面ナビ
  • ドロワー型 — オーバーレイ付きのサイドパネル。実案件向け
  • push型 — コンテンツを左に押し出すアプリ風の動き
  • フルスクリーン型 — 全画面＋スタッガードアニメーション
  • 円形展開型 — FABから円形に広がる2段階アニメーション

迷ったら基本型から始めて、用途に応じてステップアップしていくのがおすすめです。この記事の最小コード例は動作の核心部分だけを抜き出しています。各パターンの個別記事では、aria属性・Escキー・外部クリック閉じなどのアクセシビリティ対応を含めた完全版のスニペットを公開しています。

各パターンの詳しい解説は下記の関連記事からご覧ください。

【シリーズ記事】ハンバーガーメニューの作り方

関連記事
CSSとJSだけで作るハンバーガーメニュー【コピペで使えるスニペット付き】
「ハンバーガーメニューを実装したいけど、どこから手をつければいいか分からない」——そんな悩みを抱えたことはありませんか？ …
2026年4月10日 2026年4月20日
関連記事
スライドダウン型ハンバーガーメニューの作り方｜ヘッダー背面から全画面ナビが降りる演出をCSS×JSで実装【コピペOK】
「ハンバーガーボタンをタップしたら、ヘッダーの裏からナビゲーションがスーッと下に降りてきた」——そんな印象的な演出のサイ…
2026年4月14日 2026年4月20日
関連記事
右から左にスライドインする全画面ハンバーガーメニューの作り方｜ヘッダー常時表示＆z-index階層設計【コピペOK】
「ハンバーガーメニューを右からスライドインさせて画面全体を覆いたい。でも、ナビが画面いっぱいに広がったらロゴや閉じるボ…
2026年4月15日 2026年4月20日
関連記事
ドロワーメニューの作り方｜オーバーレイ・スクロールロック・フォーカストラップまで徹底解説【コピペOK】
「ハンバーガーメニューは作れるけど、実案件で求められるドロワーメニューはどう実装すればいい？」——そんな疑問を抱えたこと…
2026年4月10日 2026年4月20日
関連記事
push型ハンバーガーメニューの作り方｜ページコンテンツが左にスライドする実装【コピペOK】
「ネイティブアプリのように、ボタンを押すとページ全体がスーッと横にスライドするメニュー、Webでも作れないかな？」——スマホ…
2026年4月15日 2026年4月20日
関連記事
フルスクリーンメニューの作り方｜CSS×JSで実装【コピペOK】
「画面全体をメニューで覆うフルスクリーンナビゲーション、かっこいいけど、どうやって作るの？」——ポートフォリオサイトやク…
2026年4月10日 2026年4月20日
関連記事
右下から円形に広がるハンバーガーメニューの作り方｜FAB＋2段階アニメーションをCSS×JSで実装【コピペOK】
「ポートフォリオサイトに、ちょっと印象的なハンバーガーメニューを置きたい」「通常の上から降りるタイプのメニューに少し飽…
2026年4月15日 2026年4月20日