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

【コピペOK】メガメニュー表示アニメーション完全ガイド｜6種類の実装方法

2025-07-27

ケケンタ

メガメニューの表示アニメーションを実装したい……

ケケンタ

大型サイトのナビゲーション効果を作りたい……

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

Web制作において人気の高いアニメーション効果
メガメニュー表示アニメーション

をご紹介します。

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

この記事で紹介するメガメニュー表示アニメーション

フェード（透明度変化による表示）
スライド（方向性のあるスライド表示）
カスケード（段階的な表示）
グリッド（グリッド状の表示）
カラム（カラム形式の表示）
カード（カード形式の表示）

ケケンタ

特に大型サイトやECサイトには、メガメニュー表示アニメーションが非常に効果的です。この記事のコードをご活用いただき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調べ-詳細)

メガメニュー表示アニメーションとは

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

効果的な使用場面

適している場面

大型サイト
ECサイト
企業サイト
ポータルサイト
複雑なナビゲーション

避けるべき場面

モバイルサイト
シンプルなサイト
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェード	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
カスケード	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
グリッド	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
カラム	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
カード	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐

フェード

① デモ

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

このフェードの特徴

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

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu fade">
        <div class="mega-menu-content">
          <div class="mega-menu-section">
            <h3>カテゴリ1</h3>
            <ul>
              <li><a href="#">商品A</a></li>
              <li><a href="#">商品B</a></li>
              <li><a href="#">商品C</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ2</h3>
            <ul>
              <li><a href="#">商品D</a></li>
              <li><a href="#">商品E</a></li>
              <li><a href="#">商品F</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ3</h3>
            <ul>
              <li><a href="#">商品G</a></li>
              <li><a href="#">商品H</a></li>
              <li><a href="#">商品I</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  display: flex;
  padding: 30px;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.mega-menu-section {
  flex: 1;
}

.mega-menu-section h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mega-menu-section ul {
  list-style: none;
}

.mega-menu-section li {
  margin: 8px 0;
}

.mega-menu-section a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.mega-menu-section a:hover {
  color: #667eea;
}

④ カスタマイズ例

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

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

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

スライド

① デモ

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

このスライドの特徴

方向性のあるスライド表示
自然な動き
視覚的インパクト中
直感的な印象

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu slide">
        <div class="mega-menu-content">
          <div class="mega-menu-section">
            <h3>カテゴリ1</h3>
            <ul>
              <li><a href="#">商品A</a></li>
              <li><a href="#">商品B</a></li>
              <li><a href="#">商品C</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ2</h3>
            <ul>
              <li><a href="#">商品D</a></li>
              <li><a href="#">商品E</a></li>
              <li><a href="#">商品F</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ3</h3>
            <ul>
              <li><a href="#">商品G</a></li>
              <li><a href="#">商品H</a></li>
              <li><a href="#">商品I</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow: hidden;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  display: flex;
  padding: 30px;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.mega-menu-section {
  flex: 1;
}

.mega-menu-section h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mega-menu-section ul {
  list-style: none;
}

.mega-menu-section li {
  margin: 8px 0;
}

.mega-menu-section a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.mega-menu-section a:hover {
  color: #667eea;
}

④ カスタマイズ例

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

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

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

.nav-item:hover .mega-menu {
  transform: translateX(-50%) translateY(0) scale(1);
}

カスケード

① デモ

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

このカスケードの特徴

段階的な表示
動的な効果
視覚的インパクト大
洗練された印象

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu cascade">
        <div class="mega-menu-content">
          <div class="mega-menu-section">
            <h3>カテゴリ1</h3>
            <ul>
              <li><a href="#">商品A</a></li>
              <li><a href="#">商品B</a></li>
              <li><a href="#">商品C</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ2</h3>
            <ul>
              <li><a href="#">商品D</a></li>
              <li><a href="#">商品E</a></li>
              <li><a href="#">商品F</a></li>
            </ul>
          </div>
          <div class="mega-menu-section">
            <h3>カテゴリ3</h3>
            <ul>
              <li><a href="#">商品G</a></li>
              <li><a href="#">商品H</a></li>
              <li><a href="#">商品I</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  display: flex;
  padding: 30px;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.mega-menu-section {
  flex: 1;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.nav-item:hover .mega-menu-section:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.nav-item:hover .mega-menu-section:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.nav-item:hover .mega-menu-section:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.mega-menu-section h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mega-menu-section ul {
  list-style: none;
}

.mega-menu-section li {
  margin: 8px 0;
}

.mega-menu-section a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.mega-menu-section a:hover {
  color: #667eea;
}

④ カスタマイズ例

/* カスケード速度の変更 */
.nav-item:hover .mega-menu-section:nth-child(1) {
  transition-delay: 0.05s;
}

.nav-item:hover .mega-menu-section:nth-child(2) {
  transition-delay: 0.1s;
}

.nav-item:hover .mega-menu-section:nth-child(3) {
  transition-delay: 0.15s;
}

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

.nav-item:hover .mega-menu-section {
  transform: translateX(0);
}

グリッド

① デモ

See the Pen メガメニューグリッド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグリッドの特徴

グリッド状の表示
整然とした効果
視覚的インパクト大
モダンな印象

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu grid">
        <div class="mega-menu-content">
          <div class="grid-container">
            <div class="grid-item">
              <h3>カテゴリ1</h3>
              <ul>
                <li><a href="#">商品A</a></li>
                <li><a href="#">商品B</a></li>
                <li><a href="#">商品C</a></li>
              </ul>
            </div>
            <div class="grid-item">
              <h3>カテゴリ2</h3>
              <ul>
                <li><a href="#">商品D</a></li>
                <li><a href="#">商品E</a></li>
                <li><a href="#">商品F</a></li>
              </ul>
            </div>
            <div class="grid-item">
              <h3>カテゴリ3</h3>
              <ul>
                <li><a href="#">商品G</a></li>
                <li><a href="#">商品H</a></li>
                <li><a href="#">商品I</a></li>
              </ul>
            </div>
            <div class="grid-item">
              <h3>カテゴリ4</h3>
              <ul>
                <li><a href="#">商品J</a></li>
                <li><a href="#">商品K</a></li>
                <li><a href="#">商品L</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid-item {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.nav-item:hover .grid-item:nth-child(1) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.1s;
}

.nav-item:hover .grid-item:nth-child(2) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

.nav-item:hover .grid-item:nth-child(3) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}

.nav-item:hover .grid-item:nth-child(4) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s;
}

.grid-item h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.grid-item ul {
  list-style: none;
}

.grid-item li {
  margin: 8px 0;
}

.grid-item a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.grid-item a:hover {
  color: #667eea;
}

④ カスタマイズ例

/* グリッド列数の変更 */
.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

/* グリッド速度の変更 */
.grid-item {
  transition: all 0.5s ease;
}

/* グリッド効果の変更 */
.grid-item {
  transform: translateY(-20px);
}

.nav-item:hover .grid-item {
  transform: translateY(0);
}

カラム

① デモ

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

このカラムの特徴

カラム形式の表示
整然とした効果
視覚的インパクト中
整理された印象

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu column">
        <div class="mega-menu-content">
          <div class="column-container">
            <div class="column-item">
              <h3>カテゴリ1</h3>
              <ul>
                <li><a href="#">商品A</a></li>
                <li><a href="#">商品B</a></li>
                <li><a href="#">商品C</a></li>
              </ul>
            </div>
            <div class="column-item">
              <h3>カテゴリ2</h3>
              <ul>
                <li><a href="#">商品D</a></li>
                <li><a href="#">商品E</a></li>
                <li><a href="#">商品F</a></li>
              </ul>
            </div>
            <div class="column-item">
              <h3>カテゴリ3</h3>
              <ul>
                <li><a href="#">商品G</a></li>
                <li><a href="#">商品H</a></li>
                <li><a href="#">商品I</a></li>
              </ul>
            </div>
            <div class="column-item">
              <h3>カテゴリ4</h3>
              <ul>
                <li><a href="#">商品G</a></li>
                <li><a href="#">商品H</a></li>
                <li><a href="#">商品I</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.column-container {
  display: flex;
  gap: 40px;
}

.column-item {
  flex: 1;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.nav-item:hover .column-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.nav-item:hover .column-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.nav-item:hover .column-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.nav-item:hover .column-item:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.column-item h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.column-item ul {
  list-style: none;
}

.column-item li {
  margin: 8px 0;
}

.column-item a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.column-item a:hover {
  color: #667eea;
}

④ カスタマイズ例

/* カラム速度の変更 */
.column-item {
  transition: all 0.5s ease;
}

/* カラム方向の変更 */
.column-item {
  transform: translateX(-10px);
}

.nav-item:hover .column-item {
  transform: translateX(0);
}

/* カラム幅の変更 */
.column-item {
  flex: 0 0 200px;
}

カード

① デモ

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

このカードの特徴

カード形式の表示
立体的な効果
視覚的インパクト大
モダンな印象

② HTML

<nav class="mega-menu-container">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-link">商品カテゴリ</a>
      <div class="mega-menu card">
        <div class="mega-menu-content">
          <div class="card-container">
            <div class="card-item">
              <div class="card-header">
                <h3>カテゴリ1</h3>
              </div>
              <div class="card-body">
                <ul>
                  <li><a href="#">商品A</a></li>
                  <li><a href="#">商品B</a></li>
                  <li><a href="#">商品C</a></li>
                </ul>
              </div>
            </div>
            <div class="card-item">
              <div class="card-header">
                <h3>カテゴリ2</h3>
              </div>
              <div class="card-body">
                <ul>
                  <li><a href="#">商品D</a></li>
                  <li><a href="#">商品E</a></li>
                  <li><a href="#">商品F</a></li>
                </ul>
              </div>
            </div>
            <div class="card-item">
              <div class="card-header">
                <h3>カテゴリ3</h3>
              </div>
              <div class="card-body">
                <ul>
                  <li><a href="#">商品G</a></li>
                  <li><a href="#">商品H</a></li>
                  <li><a href="#">商品I</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">サービス</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">会社概要</a>
    </li>
  </ul>
</nav>

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.mega-menu-container {
  background: #667eea;
  padding: 0 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mega-menu {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100vw;
  background: white;
  border-top: 1px solid #e1e5e9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.card-container {
  display: flex;
  gap: 20px;
}

.card-item {
  flex: 1;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover .card-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.1s;
}

.nav-item:hover .card-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}

.nav-item:hover .card-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}

.card-header {
  background: #667eea;
  color: white;
  padding: 15px 20px;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.card-body ul {
  list-style: none;
}

.card-body li {
  margin: 8px 0;
}

.card-body a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.card-body a:hover {
  color: #667eea;
}

④ カスタマイズ例

/* カード速度の変更 */
.card-item {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* カード効果の変更 */
.card-item {
  transform: translateY(-20px) rotateX(10deg);
}

.nav-item:hover .card-item {
  transform: translateY(0) rotateX(0);
}

/* カード色の変更 */
.card-item {
  background: #e3f2fd;
}

.card-header {
  background: #2196f3;
}