ハンバーガーメニュー – ケケンタの独学ITブログ

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

ケケンタ — Wed, 16 Jul 2025 06:21:00 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】背景アニメーション｜5種類【Web制作】

【コピペOK】パララックス系スケールアニメーション｜5種類【Web制作】

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

あわせて読みたい

【コピペOK】ハンバーガーボタンのラインアニメーション｜5種類【Web制作】ハンバーガーボタンのアニメーションを実装したい…… 3本の線がXに変化するアニメーションを作りたい…… 今回はこのようなお悩みをお持ちの方へ向けて Web制作において必…

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

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

基本的なスライド

① デモ

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

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

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

② HTML




  
    ホーム
    会社概要
    サービス
    お問い合わせ

アクセシビリティのため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






  
    ホーム
    会社概要
    サービス
    お問い合わせ

③ 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


  

  
    
      ホーム
      会社概要
      サービス
      お問い合わせ
    
  

  
    メインコンテンツ
    このコンテンツがメニューによって押し出されます。

③ 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




  
    ホーム
    会社概要
    サービス
    お問い合わせ

③ 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




  
    ホーム
    会社概要
    サービス
    お問い合わせ

③ 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%);
}

まとめ

今回ご紹介したハンバーガーメニューのスライドアニメーションは、Webサイトのユーザビリティを向上させる重要な要素です。

実装のポイント

アクセシビリティを考慮したHTML構造
適切なアニメーション時間（300ms〜500ms）
スムーズなイージング関数の使用
モバイルデバイスでの動作確認
メニュー外クリックでの閉じる機能
スクロール対応（overflow-y: auto）

気を付けるポイント

過度に複雑なアニメーション
長すぎるアニメーション時間
アクセシビリティを無視した実装
パフォーマンスを考慮しない実装
メニューが閉じない問題

ケケンタ

特にモバイルファーストのWebサイトでは、ハンバーガーメニューのスライドアニメーションがユーザー体験を大きく左右します。この記事のコードをご活用いただき、より使いやすいWebサイトの制作に繋がれば何よりです。

おすすめの組み合わせ

シンプルなサイト: 基本的なスライド
モダンなサイト: オーバーレイスライド
プレミアムサイト: 3Dスライド
パフォーマンス重視: フェードスライド

この記事が少しでもお役に立ったなら何よりです！

ケケンタ

最後までご覧いただきありがとうございました！

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】背景アニメーション｜5種類【Web制作】

【コピペOK】パララックス系スケールアニメーション｜5種類【Web制作】

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

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では業界最安値でWeb制作を...

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】ハンバーガーボタンのラインアニメーション｜5種類【Web制作】

ケケンタ — Wed, 16 Jul 2025 05:21:22 +0000

ケケンタ

ハンバーガーボタンのアニメーションを実装したい……

ケケンタ

3本の線がXに変化するアニメーションを作りたい……

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

Web制作において必須のUI要素
ハンバーガーボタンのアニメーション

をご紹介します。

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

この記事で紹介するハンバーガーボタンのアニメーション

基本的なXアニメーション（シンプルで高パフォーマンス）
スライドアニメーション（線がスライドしてXに変化）
ローテーションアニメーション（回転しながらXに変化）
フェードアニメーション（フェードイン/アウトでXに変化）
スケールアニメーション（拡大縮小でXに変化）

特にモバイルファーストのWebサイトやモダンなUIデザインには、ハンバーガーボタンのアニメーションが非常に効果的です。

ケケンタ

この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【コピペOK】背景アニメーション｜5種類【Web制作】

ハンバーガーボタンのラインアニメーションとは

ハンバーガーボタンのラインアニメーションは、3本の横線がXマークに変化するアニメーション効果です。ユーザーの操作に対する視覚的フィードバックを提供し、UIの使いやすさを向上させる効果的な手法です。

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
Xアニメーション	⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライドアニメーション	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ローテーションアニメーション	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードアニメーション	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケールアニメーション	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

基本的なXアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】Xアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このXアニメーションの特徴

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

② HTML

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

③ CSS

.hamburger-menu {
  position: relative;
  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;
}

.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);
}

④ JavaScript

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

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

⑤ カスタマイズ例

/* 遅いアニメーション */
.hamburger-menu.slow .hamburger-line {
  transition: all 0.5s ease-in-out;
}

/* 速いアニメーション */
.hamburger-menu.fast .hamburger-line {
  transition: all 0.2s ease-in-out;
}

/* バウンス効果 */
.hamburger-menu.bounce .hamburger-line {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* カラー変化 */
.hamburger-menu.active .hamburger-line {
  background-color: #ff6b6b;
}

スライドアニメーション

① デモ

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

このスライドアニメーションの特徴

線がスライドしてXに変化
スムーズな動き
視覚的に分かりやすい

② HTML

③ CSS

.hamburger-menu.slide {
  position: relative;
  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;
}

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

/* スライドアニメーション */
.hamburger-menu.slide.active .hamburger-line:nth-child(1) {
  transform: translateX(-6px)  translateY(6px) rotate(45deg);
}

.hamburger-menu.slide.active .hamburger-line:nth-child(2) {
  transform: translateX(-100%);
  opacity: 0;
}

.hamburger-menu.slide.active .hamburger-line:nth-child(3) {
  transform: translateX(-6px) translateY(-7px) rotate(-45deg);
}

④ JavaScript

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

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

ローテーションアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】ローテーションアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーションアニメーションの特徴

線が回転しながらXに変化
3D的な動き
視覚的インパクト大

② HTML

③ CSS

.hamburger-menu.rotate {
  position: relative;
  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;
  perspective: 100px;
}

.hamburger-menu.rotate .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* ローテーションアニメーション */
.hamburger-menu.rotate.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}

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

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

④ JavaScript

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

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

⑤ カスタマイズ例

/* 360度回転 */
.hamburger-menu.rotate-360.active .hamburger-line:nth-child(1) {
  transform: rotate(405deg) translateY(7px);
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(2) {
  transform: rotate(540deg);
  opacity: 0;
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(3) {
  transform: rotate(315deg) translateY(-7px);
}

/* バウンス回転 */
.hamburger-menu.rotate-bounce .hamburger-line {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

フェードアニメーション

① デモ

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

このフェードアニメーションの特徴

線がフェードイン/アウトでXに変化
エレガントな動き
シンプルで洗練された印象

② HTML

③ CSS

.hamburger-menu.fade {
  position: relative;
  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;
}

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

/* フェードアニメーション */
.hamburger-menu.fade.active .hamburger-line:nth-child(1) {
  opacity: 0;
  transform: translateY(7px);
}

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

.hamburger-menu.fade.active .hamburger-line:nth-child(3) {
  opacity: 0;
  transform: translateY(-7px);
}

/* Xマークの疑似要素 */
.hamburger-menu.fade::before,
.hamburger-menu.fade::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.hamburger-menu.fade::before {
  transform: rotate(45deg);
}

.hamburger-menu.fade::after {
  transform: rotate(-45deg);
}

.hamburger-menu.fade.active::before,
.hamburger-menu.fade.active::after {
  opacity: 1;
}

④ JavaScript

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

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

⑤ カスタマイズ例

/* 段階的フェード */
.hamburger-menu.fade-stagger .hamburger-line {
  transition-delay: 0s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}

/* カラーフェード */
.hamburger-menu.fade-color.active .hamburger-line {
  background-color: transparent;
}

.hamburger-menu.fade-color.active::before,
.hamburger-menu.fade-color.active::after {
  background-color: #ff6b6b;
}

スケールアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】スケールアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールアニメーションの特徴

線が拡大縮小しながらXに変化
動的なスケール効果
視覚的インパクト大

② HTML

③ CSS

.hamburger-menu.scale {
  position: relative;
  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;
}

.hamburger-menu.scale .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* スケールアニメーション */
.hamburger-menu.scale.active .hamburger-line:nth-child(1) {
  transform: scale(1.3) rotate(45deg) translateY(7px);
}

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

.hamburger-menu.scale.active .hamburger-line:nth-child(3) {
  transform: scale(1.3) rotate(-45deg) translateY(-7px);
}

④ JavaScript

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

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

⑤ カスタマイズ例

/* バウンススケール */
.hamburger-menu.scale-bounce .hamburger-line {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* オーバースケール */
.hamburger-menu.scale-over .hamburger-line:nth-child(1) {
  transform: scale(1.5) rotate(45deg) translateY(7px);
}

.hamburger-menu.scale-over .hamburger-line:nth-child(3) {
  transform: scale(1.5) rotate(-45deg) translateY(-7px);
}

/* 段階的スケール */
.hamburger-menu.scale-stagger .hamburger-line:nth-child(1) {
  transition-delay: 0s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}

まとめ

今回ご紹介したハンバーガーメニューのラインアニメーションは、Webサイトのユーザビリティを向上させる重要な要素です。

実装のポイント

アクセシビリティを考慮したHTML構造
適切なアニメーション時間（300ms〜500ms）
スムーズなイージング関数の使用
モバイルデバイスでの動作確認

避けるべきポイント

過度に複雑なアニメーション
長すぎるアニメーション時間
アクセシビリティを無視した実装
パフォーマンスを考慮しない実装

おすすめの組み合わせ

シンプルなサイト: 基本的なXアニメーション
モダンなサイト: ローテーションアニメーション
プレミアムサイト: モーフィングアニメーション
パフォーマンス重視: フェードアニメーション

ケケンタ

特にモバイルファーストのWebサイトでは、ハンバーガーメニューのラインアニメーションがユーザーエクスペリエンスを大きく左右します！

この記事のコードをご活用いただき、より使いやすいWebサイトの制作に繋がれば何よりです。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【コピペOK】背景アニメーション｜5種類【Web制作】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】ハンバーガーメニューの紹介【アコーディオン付きあり】

ケケンタ — Fri, 31 May 2024 04:55:25 +0000

ケケンタ

ハンバーガーメニューをすぐに実装したい……

ケケンタ

ハンバーガーメニューの作り方が分からない……

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

Web制作において必須パーツのひとつ「ハンバーガーメニュー」

をご紹介します。

複数のパターンをご紹介しますので、いままさに「ハンバーガーメニューを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するハンバーガーメニュー

普通のハンバーガーメニュー
ハンバーガーメニュー（アコーディオン付き）
ハンバーガーメニュー（アコーディオン付き＋アコーディオン無しの混同タイプ）

ケケンタ

特にアコーディオン付きのハンバーガーメニューの実装はひと手間かかるため、この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するハンバーガーメニュー内のアイコンにはFontAwesomeを背景画像として設定していますが、普通のアイコン画像を設定することも可能です。

Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

スクロールすると固定ヘッダーの背景がフワッと浮かび上がる実装

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【コピペOK】ハンバーガーメニュー

① 普通のハンバーガーメニュー

See the Pen ハンバーガーメニュー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このハンバーガーメニューの特徴

アコーディオンメニューを持たない通常タイプ
メニュー数が多く、画面幅に収まらない場合はスクロール可能（スクロールバーは非表示にしています）

② ハンバーガーメニュー（アコーディオン付き）

See the Pen ハンバーガーメニュー（アコーディオンあり） by ケケンタ (@lgshifbg-the-looper) on CodePen.

このハンバーガーメニューの特徴

ハンバーガーメニューがすべてアコーディオンメニューで構成されている
メニュー数が多い、またはアコーディオンメニュー開閉により画面幅に収まらなくなった場合は、スクロール可能（スクロールバーは非表示にしています）

③ ハンバーガーメニュー（アコーディオン付き＋アコーディオン無しの混同タイプ）

See the Pen ハンバーガーメニュー（アコーディオン付き＋アコーディオン無し混同） by ケケンタ (@lgshifbg-the-looper) on CodePen.

このハンバーガーメニューの特徴

ハンバーガーメニュー内にアコーディオンメニューとアコーディオンではないメニューが混在している（アコーディオンメニューと普通のメニューが両方とも必要なときにオススメ）
メニュー数が多い、またはアコーディオンメニュー開閉により画面幅に収まらなくなった場合は、スクロール可能（スクロールバーは非表示にしています）

ハンバーガーメニューはWeb制作で必須——だからこそ効率化を！

ケケンタ

簡単ではありますが、以上がハンバーガーメニューのご紹介でした！

ハンバーガーメニューはWeb制作でいまや必須パーツのひとつです。

そのため、ここを以下に効率化できるかがWeb制作のスピードアップにおいて重要になってきます。

この記事でご紹介したものだけでは十分でないという方もいらっしゃるかとは思いますが、少しでも多くの方の効率化のお手伝いができればと思い、複数のハンバーガーメニューをご紹介させていただきました。

ケケンタ

この記事がお役に立ったなら何よりです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

ハンバーガーメニュー – ケケンタの独学ITブログ

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

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

効果的な使用場面

実装方法の比較

基本的なスライド

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

オーバーレイスライド

① デモ

② HTML

③ CSS

④ JavaScript

プッシュスライド

① デモ

② HTML

メインコンテンツ

③ CSS

④ JavaScript

フェードスライド

① デモ

② HTML

③ CSS

④ JavaScript

3Dスライド

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

もっと効率的にWeb制作を学びたい方へ

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果

【コピペOK】ハンバーガーボタンのラインアニメーション｜5種類【Web制作】

ハンバーガーボタンのラインアニメーションとは

効果的な使用場面

実装方法の比較

基本的なXアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライドアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

ローテーションアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

フェードアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケールアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

もっと効率的にWeb制作を学びたい方へ

関連記事