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

【コピペOK】ドロップダウンメニューアニメーション完全ガイド｜5種類

2025-07-172025-07-18

ケケンタ

ドロップダウンメニューのアニメーションを実装したい……

ケケンタ

ナビゲーションやリストをもっと魅力的にしたい……

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

Web制作において人気の高いUI要素
ドロップダウンメニューのアニメーション

をご紹介します。

5種類のドロップダウンアニメーションを完全網羅した実装なので、いままさに「ドロップダウンを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するドロップダウンアニメーション

スライドダウン（定番の下方向展開）
フェード（ふわっと表示）
スケール（拡大しながら表示）
左右スライド（横から出現）
複合アニメーション（応用テク）

ケケンタ

特にグローバルナビゲーションやフォームの選択肢には、ドロップダウンアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです！

なお、今回ご紹介するアニメーションはCSSのみまたはCSS＋JavaScriptで実装できるので、初心者の方でも安心してご利用いただけます。

あわせて読みたい

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

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

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

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

ドロップダウンアニメーションとは

ドロップダウンアニメーションは、メニューやリストがユーザー操作に応じて滑らかに表示・非表示されるアニメーション効果です。視覚的なフィードバックを与え、UIの使いやすさと印象を大きく向上させます。

効果的な使用場面

適している場面

グローバルナビゲーション
サブメニュー
フォームの選択肢
ユーザーメニュー
モバイルメニュー

避けるべき場面

重要な情報の即時表示が必要な場面
アクセシビリティを重視する場面（代替手段が必要）
頻繁な表示/非表示でパフォーマンスが気になる場合

実装方法の比較

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

スライドダウン

① デモ

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

このスライドダウンの特徴

定番の下方向展開
シンプルで分かりやすい
すべてのブラウザで対応

② HTML

<button class="dropdown-toggle">メニューを開く</button>
<ul class="dropdown-menu">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

③ CSS

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-menu.show {
  max-height: 300px;
}
.dropdown-menu li a {
  display: block;
  padding: 1rem 2rem;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-menu li a:hover {
  background: #f0f4fa;
}

④ JavaScript

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.dropdown-menu').classList.toggle('show');
});

⑤ カスタマイズ例

/* アニメーション時間を変更 */
.dropdown-menu {
  transition: max-height 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

フェード

① デモ

See the Pen 【ドロップダウンメニュー】フェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードの特徴

ふわっと表示
軽やかな印象
シンプルな実装

② HTML

<button class="dropdown-toggle">メニューを開く</button>
<ul class="dropdown-menu-fade">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

③ CSS

.dropdown-menu-fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-menu-fade.show {
  opacity: 1;
  visibility: visible;
}
.dropdown-menu-fade li a {
  display: block;
  padding: 1rem 2rem;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-menu-fade li a:hover {
  background: #f0f4fa;
}

④ JavaScript

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.dropdown-menu-fade').classList.toggle('show');
});

⑤ カスタマイズ例

/* 遅いフェード */
.dropdown-menu-fade {
  transition: opacity 0.7s, visibility 0.7s;
}

スケール

① デモ

See the Pen 【ドロップダウンメニュー】スケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールの特徴

拡大しながら表示
モダンな印象
立体感を演出

② HTML

<button class="dropdown-toggle">メニューを開く</button>
<ul class="dropdown-menu-scale">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

③ CSS

.dropdown-menu-scale {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-menu-scale.show {
  transform: scaleY(1);
}
.dropdown-menu-scale li a {
  display: block;
  padding: 1rem 2rem;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-menu-scale li a:hover {
  background: #f0f4fa;
}

④ JavaScript

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.dropdown-menu-scale').classList.toggle('show');
});

⑤ カスタマイズ例

/* X方向拡大 */
.dropdown-menu-scale {
  transform: scaleX(0);
  transform-origin: left;
}
.dropdown-menu-scale.show {
  transform: scaleX(1);
}

左右スライド

① デモ

See the Pen 【ドロップダウンメニュー】左右スライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

この左右スライドの特徴

横から出現
サイドメニュー風にも応用可
インパクト大

② HTML

<button class="dropdown-toggle">メニューを開く</button>
<ul class="dropdown-menu-slide">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

③ CSS

.dropdown-menu-slide {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-menu-slide.show {
  transform: translateX(0);
  opacity: 1;
}
.dropdown-menu-slide li a {
  display: block;
  padding: 1rem 2rem;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-menu-slide li a:hover {
  background: #f0f4fa;
}

④ JavaScript

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.dropdown-menu-slide').classList.toggle('show');
});

⑤ カスタマイズ例

/* 右から出現 */
.dropdown-menu-slide {
  transform: translateX(100%);
}
.dropdown-menu-slide.show {
  transform: translateX(0);
}

複合アニメーション

① デモ

See the Pen 【ドロップダウンメニュー】複合アニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

この複合アニメーションの特徴

スケール＋フェードなどの応用
高級感・リッチな印象
サブメニューやモーダルにも応用可

② HTML

<button class="dropdown-toggle">メニューを開く</button>
<ul class="dropdown-menu-combo">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

③ CSS

.dropdown-menu-combo {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-menu-combo.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.dropdown-menu-combo li a {
  display: block;
  padding: 1rem 2rem;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.dropdown-menu-combo li a:hover {
  background: #f0f4fa;
}

④ JavaScript

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  document.querySelector('.dropdown-menu-combo').classList.toggle('show');
});

⑤ カスタマイズ例

/* より強いスケール感 */
.dropdown-menu-combo {
  transform: scale(0.8) translateY(-20px);
}
.dropdown-menu-combo.show {
  transform: scale(1) translateY(0);
}