この記事にはプロモーションが含まれています。

【コピペOK】ハンバーガーメニューのスライドアニメーション完全ガイド｜5種類

2025-07-162025-07-18

ケケンタ

ハンバーガーメニューがスライドして開くアニメーションを実装したい……

ケケンタ

メニューが滑らかに表示される効果を作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
ハンバーガーメニューのスライドアニメーション

をご紹介します。

5種類のスライドアニメーション効果を完全網羅しました。いままさに「スライドメニューを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するハンバーガーメニューのスライドアニメーション

基本的なスライド（シンプルで高パフォーマンス）
オーバーレイスライド（背景オーバーレイ付き）
プッシュスライド（コンテンツを押し出す）
フェードスライド（フェード効果付き）
3Dスライド（立体的なスライド効果）

ケケンタ

特にモバイルファーストのWebサイトやモダンなUIデザインには、ハンバーガーメニューのスライドアニメーションが非常に効果的です。この記事のコードをご活用いただき、Web制作の効率化に繋がれば何よりです！

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【簡単カスタマイズ】

【コピペOK】背景アニメーション完全ガイド｜5種類

【コピペOK】パララックス系スケールアニメーション完全ガイド｜5種類

ちなみにハンバーガーメニューを実装するなら必須になるハンバーガーボタンのアニメーションについては以下の記事にまとめています。

ハンバーガーメニューのスライドアニメーションとは

ハンバーガーメニューのスライドアニメーションは、メニューが画面の端から滑らかにスライドして表示されるアニメーション効果です。ユーザーの操作に対する視覚的フィードバックを提供し、UIの使いやすさを向上させる効果的な手法です。

効果的な使用場面

適している場面

モバイルサイトのナビゲーション
レスポンシブWebデザイン
モダンなWebアプリケーション
ダッシュボードや管理画面
ワンぺージサイト

避けるべき場面

デスクトップ専用サイト（ハンバーガーメニュー自体が不要）
アクセシビリティを重視する場面（代替手段が必要）
高齢者向けサイト（認識しにくい場合がある）

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
基本的なスライド	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
オーバーレイスライド	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
プッシュスライド	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
フェードスライド	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
3Dスライド	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐

基本的なスライド

① デモ

See the Pen 【ハンバーガーメニュー】基本的なスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

この基本的なスライドの特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

<button class="hamburger-menu" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<nav class="slide-menu">
  <ul class="menu-list">
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

アクセシビリティのためaria-labelを必ず設定してください。

③ CSS

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1001;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* スライドメニュー */
.slide-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-menu.active {
  right: 0;
}

.menu-list {
  list-style: none;
  padding: 80px 0 0 0;
  margin: 0;
}

.menu-list li {
  margin: 0;
  padding: 0;
}

.menu-list a {
  display: block;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');
  const slideMenu = document.querySelector('.slide-menu');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
    slideMenu.classList.toggle('active');
  });

  // メニュー外クリックで閉じる
  document.addEventListener('click', function(e) {
    if (!hamburger.contains(e.target) && !slideMenu.contains(e.target)) {
      hamburger.classList.remove('active');
      slideMenu.classList.remove('active');
    }
  });
});

⑤ カスタマイズ例

/* 左からスライド */
.slide-menu.left {
  right: auto;
  left: -300px;
}

.slide-menu.left.active {
  left: 0;
}

/* 遅いスライド */
.slide-menu.slow {
  transition: right 0.5s ease-in-out;
}

/* バウンス効果 */
.slide-menu.bounce {
  transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

オーバーレイスライド

① デモ

See the Pen 【ハンバーガーメニュー】オーバーレイスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このオーバーレイスライドの特徴

背景オーバーレイ付きのスライド
より洗練された印象
視覚的な階層が明確

② HTML

<button class="hamburger-menu" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

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

<nav class="slide-menu overlay-menu">
  <ul class="menu-list">
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

③ CSS

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1002;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* スライドメニュー */
.slide-menu.overlay-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-menu.overlay-menu.active {
  right: 0;
}

.menu-list {
  list-style: none;
  padding: 80px 0 0 0;
  margin: 0;
}

.menu-list li {
  margin: 0;
  padding: 0;
}

.menu-list a {
  display: block;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');
  const slideMenu = document.querySelector('.slide-menu.overlay-menu');
  const overlay = document.querySelector('.overlay');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
    slideMenu.classList.toggle('active');
    overlay.classList.toggle('active');
  });

  // オーバーレイクリックで閉じる
  overlay.addEventListener('click', function() {
    hamburger.classList.remove('active');
    slideMenu.classList.remove('active');
    overlay.classList.remove('active');
  });
});

プッシュスライド

① デモ

See the Pen 【ハンバーガーメニュー】プッシュスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このプッシュスライドの特徴

メインコンテンツを押し出すスライド
動的なレイアウト変化
視覚的インパクト大

② HTML

<div class="container">
  <button class="hamburger-menu" aria-label="メニューを開く">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>

  <nav class="slide-menu push-menu">
    <ul class="menu-list">
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">会社概要</a></li>
      <li><a href="#services">サービス</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>

  <main class="main-content">
    <h1>メインコンテンツ</h1>
    <p>このコンテンツがメニューによって押し出されます。</p>
  </main>
</div>

③ CSS

.container {
  position: relative;
  min-height: 100vh;
}

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1001;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* プッシュスライドメニュー */
.slide-menu.push-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: left 0.3s ease-in-out;
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-menu.push-menu.active {
  left: 0;
}

/* メインコンテンツ */
.main-content {
  transition: transform 0.3s ease-in-out;
  padding: 20px;
}

.container.menu-open .main-content {
  transform: translateX(300px);
}

.menu-list {
  list-style: none;
  padding: 80px 0 0 0;
  margin: 0;
}

.menu-list li {
  margin: 0;
  padding: 0;
}

.menu-list a {
  display: block;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');
  const slideMenu = document.querySelector('.slide-menu.push-menu');
  const container = document.querySelector('.container');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
    slideMenu.classList.toggle('active');
    container.classList.toggle('menu-open');
  });

  // メニュー外クリックで閉じる
  document.addEventListener('click', function(e) {
    if (!hamburger.contains(e.target) && !slideMenu.contains(e.target)) {
      hamburger.classList.remove('active');
      slideMenu.classList.remove('active');
      container.classList.remove('menu-open');
    }
  });
});

フェードスライド

① デモ

See the Pen 【ハンバーガーメニュー】フェードスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードスライドの特徴

フェード効果付きのスライド
エレガントな動き
シンプルで洗練された印象

② HTML

<button class="hamburger-menu" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<nav class="slide-menu fade-menu">
  <ul class="menu-list">
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

③ CSS

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1001;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* フェードスライドメニュー */
.slide-menu.fade-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.4s ease-in-out;
  z-index: 1000;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-menu.fade-menu.active {
  right: 0;
  opacity: 1;
}

.menu-list {
  list-style: none;
  padding: 80px 0 0 0;
  margin: 0;
}

.menu-list li {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-in-out;
}

.slide-menu.fade-menu.active .menu-list li {
  opacity: 1;
  transform: translateX(0);
}

.slide-menu.fade-menu.active .menu-list li:nth-child(1) { transition-delay: 0.1s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(2) { transition-delay: 0.2s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(3) { transition-delay: 0.3s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(4) { transition-delay: 0.4s; }

.menu-list a {
  display: block;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');
  const slideMenu = document.querySelector('.slide-menu.fade-menu');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
    slideMenu.classList.toggle('active');
  });

  // メニュー外クリックで閉じる
  document.addEventListener('click', function(e) {
    if (!hamburger.contains(e.target) && !slideMenu.contains(e.target)) {
      hamburger.classList.remove('active');
      slideMenu.classList.remove('active');
    }
  });
});

3Dスライド

① デモ

See the Pen 【ハンバーガーメニュー】3Dスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスライドの特徴

立体的なスライド効果（45度回転から正面に）
奥行きのある動き（translateZ効果）
視覚的インパクト大

メニューにも3D効果が付いています！　ホバーをお試しください！

② HTML

<button class="hamburger-menu" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<nav class="slide-menu three-d-menu">
  <ul class="menu-list">
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

③ CSS

/* ハンバーガーメニューボタン */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1001;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* 3Dスライドメニュー */
.slide-menu.three-d-menu {
  position: fixed;
  top: 0;
  right: -350px;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
  transform: perspective(800px) rotateY(45deg) translateZ(-100px);
  transform-origin: right;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide-menu.three-d-menu.active {
  right: 0;
  transform: perspective(800px) rotateY(0deg) translateZ(0);
}

.menu-list {
  list-style: none;
  padding: 80px 0 0 0;
  margin: 0;
}

.menu-list li {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateX(50px) rotateY(-30deg) translateZ(-50px);
  transition: all 0.5s ease-in-out;
}

.slide-menu.three-d-menu.active .menu-list li {
  opacity: 1;
  transform: translateX(0) rotateY(0deg) translateZ(0);
}

.slide-menu.three-d-menu.active .menu-list li:nth-child(1) { transition-delay: 0.1s; }
.slide-menu.three-d-menu.active .menu-list li:nth-child(2) { transition-delay: 0.2s; }
.slide-menu.three-d-menu.active .menu-list li:nth-child(3) { transition-delay: 0.3s; }
.slide-menu.three-d-menu.active .menu-list li:nth-child(4) { transition-delay: 0.4s; }

.menu-list a {
  display: block;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: perspective(200px) rotateY(0deg);
  border-left: 3px solid transparent;
}

.menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: perspective(200px) rotateY(10deg) translateZ(10px);
  border-left-color: rgba(255, 255, 255, 0.5);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');
  const slideMenu = document.querySelector('.slide-menu.three-d-menu');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
    slideMenu.classList.toggle('active');
  });

  // メニュー外クリックで閉じる
  document.addEventListener('click', function(e) {
    if (!hamburger.contains(e.target) && !slideMenu.contains(e.target)) {
      hamburger.classList.remove('active');
      slideMenu.classList.remove('active');
    }
  });
});

⑤ カスタマイズ例

/* より強い3D効果 */
.slide-menu.three-d-strong {
  transform: perspective(500px) rotateY(30deg);
}

.slide-menu.three-d-strong.active {
  transform: perspective(500px) rotateY(0deg);
}

/* バウンス3D効果 */
.slide-menu.three-d-bounce {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* カラー3D効果 */
.slide-menu.three-d-color {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}