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

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

2025-07-26

ケケンタ

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

ケケンタ

ユーザビリティを向上させるメニューアニメーションを作りたい……

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

Web制作において人気の高いアニメーション効果
ドロップダウンメニュー表示アニメーション

をご紹介します。

7種類のドロップダウンメニュー表示効果を完全網羅した実装なので、いままさに「魅力的なドロップダウンメニューを作りたい！」という方は丸っとコピペしてどうぞご活用ください！

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

フェードイン（透明度変化による表示）
スライドダウン（上から下へのスライド表示）
スケール（中心から拡大表示）
スライドイン（左右からのスライド表示）
カスケード（子メニューが順次表示）
スタガー（メニュー項目が時間差で表示）
アコーディオン展開（高さ変化による展開）

ケケンタ

特にナビゲーションやカテゴリ選択には、ドロップダウンメニュー表示アニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSのみで実装するので、JavaScriptが不要で軽量なインタラクションを実現できます。

あわせて読みたい

【コピペOK】モダンボタンホバーアニメーション完全ガイド｜8種類の実装

【コピペOK】3Dボタンホバーアニメーション完全ガイド｜6種類の実装方法

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

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

¥3,000 (2025/07/26 20:34:06時点 Amazon調べ-詳細)

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

ドロップダウンメニュー表示アニメーションは、メニューが表示される際の視覚的な効果です。ユーザーの注目を集め、スムーズなインタラクションを提供するための手法です。

効果的な使用場面

適している場面

ナビゲーションメニュー
カテゴリ選択
フィルター機能
言語切り替え
ユーザーメニュー

避けるべき場面

重要な情報の表示
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェードイン	⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライドダウン	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケール	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
スライドイン	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
カスケード	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
スタガー	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
アコーディオン展開	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

フェードイン

① デモ

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

このフェードインの特徴

透明度変化による表示
スムーズな効果
視覚的インパクト小
エレガントな印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu fade-in">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

④ カスタマイズ例

/* フェード速度の変更 */
.dropdown-menu {
  transition: all 0.5s ease;
}

/* フェード方向の変更 */
.dropdown-menu {
  transform: translateY(-20px);
}

/* フェード色の変更 */
.dropdown-menu {
  background: #f8f9fa;
  border-color: #667eea;
}

スライドダウン

① デモ

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

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

上から下へのスライド表示
自然な動き
視覚的インパクト中
直感的な印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu slide-down">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

④ カスタマイズ例

/* スライド距離の変更 */
.dropdown-menu {
  transform: translateY(-30px);
}

/* スライド速度の変更 */
.dropdown-menu {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* スライド方向の変更 */
.dropdown-menu {
  transform: translateY(-20px) scale(0.95);
}

.dropdown-container:hover .dropdown-menu {
  transform: translateY(0) scale(1);
}

スケール

① デモ

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

このスケールの特徴

中心から拡大表示
動的な効果
視覚的インパクト大
モダンな印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu scale">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(-10px);
  transform-origin: top center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

④ カスタマイズ例

/* スケール比率の変更 */
.dropdown-menu {
  transform: scale(0.6) translateY(-10px);
}

/* スケール方向の変更 */
.dropdown-menu {
  transform-origin: top left;
}

/* スケール速度の変更 */
.dropdown-menu {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

スライドイン

① デモ

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

このスライドインの特徴

左右からのスライド表示
方向性のある動き
視覚的インパクト中
ダイナミックな印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu slide-in">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

④ カスタマイズ例

/* スライド方向の変更（右から） */
.dropdown-menu {
  transform: translateX(20px);
}

/* スライド距離の変更 */
.dropdown-menu {
  transform: translateX(-30px);
}

/* スライド速度の変更 */
.dropdown-menu {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

カスケード

① デモ

See the Pen ドロップダウンカスケード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカスケードの特徴

子メニューが順次表示
段階的な動き
視覚的インパクト大
洗練された印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu cascade">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-menu li {
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

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

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-container:hover .dropdown-menu li {
  opacity: 1;
  transform: translateY(0);
}

④ カスタマイズ例

/* カスケード速度の変更 */
.dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.dropdown-menu li:nth-child(2) { transition-delay: 0.1s; }
.dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.dropdown-menu li:nth-child(4) { transition-delay: 0.2s; }

/* カスケード方向の変更 */
.dropdown-menu li {
  transform: translateX(-10px);
}

.dropdown-container:hover .dropdown-menu li {
  transform: translateX(0);
}

スタガー

① デモ

See the Pen ドロップダウンスタガー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスタガーの特徴

メニュー項目が時間差で表示
リズミカルな動き
視覚的インパクト大
楽しい印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu stagger">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-menu li {
  margin: 0;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu li:nth-child(1) { transition-delay: 0.1s; }
.dropdown-menu li:nth-child(2) { transition-delay: 0.15s; }
.dropdown-menu li:nth-child(3) { transition-delay: 0.2s; }
.dropdown-menu li:nth-child(4) { transition-delay: 0.25s; }

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-container:hover .dropdown-menu li {
  opacity: 1;
  transform: scale(1);
}

④ カスタマイズ例

/* スタガー速度の変更 */
.dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.dropdown-menu li:nth-child(2) { transition-delay: 0.1s; }
.dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.dropdown-menu li:nth-child(4) { transition-delay: 0.2s; }

/* スタガー効果の変更 */
.dropdown-menu li {
  transform: translateY(-10px);
}

.dropdown-container:hover .dropdown-menu li {
  transform: translateY(0);
}

アコーディオン展開

① デモ

See the Pen ドロップダウンアコーディオン展開 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このアコーディオン展開の特徴

高さ変化による展開
自然な動き
視覚的インパクト中
実用的な印象

② HTML

<div class="dropdown-container">
  <button class="dropdown-trigger">
    ドロップダウン
    <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu accordion">
    <li><a href="#">メニュー項目1</a></li>
    <li><a href="#">メニュー項目2</a></li>
    <li><a href="#">メニュー項目3</a></li>
    <li><a href="#">メニュー項目4</a></li>
  </ul>
</div>

③ CSS

.dropdown-container {
  position: relative;
  display: inline-block;
  font-family: 'Arial', sans-serif;
}

.dropdown-trigger {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.dropdown-trigger:hover {
  background: #5a6fd8;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-container:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu li {
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #667eea;
}

.dropdown-container:hover .dropdown-menu {
  max-height: 300px;
  padding: 8px 0;
  border-color: #e1e5e9;
}

.dropdown-container:hover .dropdown-menu li {
  opacity: 1;
  transform: translateY(0);
}

④ カスタマイズ例

/* アコーディオン速度の変更 */
.dropdown-menu {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アコーディオン高さの変更 */
.dropdown-container:hover .dropdown-menu {
  max-height: 400px;
}

/* アコーディオン効果の変更 */
.dropdown-menu {
  transform: scaleY(0);
  transform-origin: top;
}

.dropdown-container:hover .dropdown-menu {
  transform: scaleY(1);
}