コピペで完結！ドロワーメニュー #13【モーダル風 高級ドロワー】

/* =========================================================
   ▼CSS：フェード＋ズーム＋背景ぼかしの高級ドロワー
   目的：
     - 背景はフェード＋blur（ぼかし）
     - 本体は中央にズームインしながらフェードイン
   スコープ：
     - #drawer-fadezoom-demo 配下に限定し、外部と衝突しない
   ========================================================= */

/* 1) メインラッパー：将来の拡張や相対配置の基点にする */
#drawer-fadezoom-demo {
  position: relative; /* 子要素の絶対配置・スタッキングの基点を提供する */
}

/* 2) 開くボタン：シリーズ共通トーンのプライマリボタン */
#drawer-fadezoom-demo .menu-btn {
  background: #0b6bff;  /* 強調色（視認性の高いブルー） */
  color: #fff;          /* コントラストを確保するため白 */
  border: none;         /* 既定のボーダーを除去してフラットに */
  border-radius: 8px;   /* 角丸でタップしやすく温和な印象に */
  padding: 10px 16px;   /* クリック領域を十分に確保 */
  cursor: pointer;      /* ホバー時にポインタを表示（可クリックを示す） */
  /* フォーカスリングは親セクションの共通スタイルに委譲（必要に応じて追加） */
}

/* 3) 背景オーバーレイ：暗幕＋背景ぼかし（ガラス風） */
#drawer-fadezoom-demo .overlay {
  position: fixed;                /* ビューポート基準で全体を覆う */
  inset: 0;                       /* top/right/bottom/left を 0 に一括指定 */
  background: rgba(0,0,0,0.4);    /* 半透明の黒で背面を減光（黒40%） */
  backdrop-filter: blur(0px);     /* 初期はぼかし 0（非アクティブ時） */
  opacity: 0;                     /* 初期は視覚的に不可視 */
  pointer-events: none;           /* 初期はクリックを透過（無効化） */
  transition:
    opacity .3s ease,            /* フェード（0.3秒） */
    backdrop-filter .4s ease;    /* ぼかし（0.4秒：やや遅らせて高級感） */
  z-index: 90;                    /* ドロワー本体（100）より背面に配置 */
  /* 注意：backdrop-filter 非対応環境では単なる暗幕として機能する（許容） */
}

/* 3-1) オーバーレイの有効状態：フェードイン＋背景ぼかしON */
#drawer-fadezoom-demo .overlay.active {
  opacity: 1;                     /* 視覚的に表示する */
  pointer-events: auto;           /* クリック可能（クリックでクローズ処理へ） */
  backdrop-filter: blur(6px);     /* 6px 程度のぼかしで“ガラス”感を付与 */
}

/* 4) ドロワー本体：モーダル風に中央配置＋ズーム・フェード */
#drawer-fadezoom-demo .panel {
  position: fixed;                /* ビューポート中央に固定配置するため fixed */
  top: 50%;                       /* 垂直方向の中心（transform と組み合わせ） */
  right: 50%;                     /* 水平方向の中心（左ではなく right を使い translate 50%） */
  transform:
    translate(50%, -50%)          /* right:50% と組み合わせて中央に位置決め */
    scale(.9);                    /* 初期は 90% 縮小で“これから出る”感を演出 */
  width: min(90vw, 400px);        /* 画面幅に応じて最大 400px、余白も確保 */
  background: #fff;               /* 内容が読みやすい白背景 */
  border-radius: 14px;            /* 高級感のある大きめ角丸 */
  box-shadow: 0 16px 36px rgba(0,0,0,.3); /* 立体感のある強めの影 */
  opacity: 0;                     /* 初期は不可視（フェード前） */
  transition:
    opacity .4s ease,            /* フェードイン（0.4秒） */
    transform .4s ease;          /* スケールアップ（ズーム）も同期 */
  z-index: 100;                   /* オーバーレイより前面に重ねる */
  /* 備考：右スライド型ではなく“中央ズーム”でモーダル風のリッチ感を出す */
}

/* 4-1) ドロワー本体の表示状態：フル不透明＋等倍スケール */
#drawer-fadezoom-demo .panel.active {
  opacity: 1;                     /* 完全に可視化 */
  transform:
    translate(50%, -50%)          /* 中央位置はそのまま */
    scale(1);                     /* 等倍に拡大して“出現完了”を表現 */
}

/* 5) パネル内部：見出し・本文・閉じるボタンの体裁 */
#drawer-fadezoom-demo header {
  background: #f8fafc;            /* 薄いグレー青み：区切り用のバー */
  border-bottom: 1px solid #e5e7eb; /* ヘッダー下に細いボーダー */
  padding: 14px;                  /* ゆとりある余白で視認性向上 */
  font-weight: 600;               /* 見出しとしての強調 */
}

#drawer-fadezoom-demo .inner {
  padding: 16px;                  /* 本文の左右上下余白を確保 */
}

#drawer-fadezoom-demo .close-btn {
  display: block;                 /* 幅・余白を扱いやすいブロック要素に */
  background: #e11d48;            /* 注意喚起の赤系（閉じる操作の明確化） */
  color: #fff;                    /* 白文字でコントラストを確保 */
  border: none;                   /* 既定のボーダーを除去 */
  border-radius: 8px;             /* 角丸でタップしやすい形状に */
  padding: 8px 12px;              /* クリック領域を十分に確保 */
  margin-top: 16px;               /* 本文との間隔を確保 */
  cursor: pointer;                /* 可クリックのサイン */
  /* 必要に応じて :focus-visible のアウトラインを追加し A11y を強化可能 */
}

/* 6) アクセシビリティ配慮（任意）：
   動きを苦手とするユーザーのためにアニメを弱める */
@media (prefers-reduced-motion: reduce) {
  #drawer-fadezoom-demo .overlay {
    transition: opacity .01ms linear, backdrop-filter .01ms linear; /* ほぼ無効化 */
  }
  #drawer-fadezoom-demo .panel {
    transition: opacity .01ms linear, transform .01ms linear;       /* ほぼ無効化 */
  }
}

<!-- ============================================
     ▼HTML：フェード＋ズーム＋背景ぼかしドロワー
     ============================================ -->
<div id="drawer-fadezoom-demo">
  <!-- 開くボタン -->
  <button class="menu-btn" data-open>開く</button>

  <!-- 背景オーバーレイ（クリックで閉じる） -->
  <div class="overlay" data-overlay></div>

  <!-- ドロワー本体（中央配置・モーダル風） -->
  <aside class="panel" role="dialog" aria-label="リッチドロワー">
    <header>リッチドロワー</header>
    <div class="inner">
      <p>フェード＋ズーム＋背景ぼかしの高級感あるトランジション。</p>
      <button class="close-btn" data-close>閉じる</button>
    </div>
  </aside>
</div>

// ============================================
// ▼JS：フェード＋ズーム＋背景ぼかし付きドロワー制御
//   - 背景（overlay）をフェード＆blurで表示/非表示
//   - 本体（panel）を中央でズームしながらフェードイン/アウト
//   - 最小限のイベントで実装（開く/閉じる/背景クリック）
// --------------------------------------------
// 使い方：#drawer-fadezoom-demo 内に
//   [data-open]（開くボタン）
//   [data-close]（閉じるボタン）
//   [data-overlay]（背景オーバーレイ）
//   .panel（ドロワー本体）
// が存在することを前提とします。
// ============================================
(() => {
  // ルート要素（この中だけで完結させるスコープの起点）
  const root = document.querySelector('#drawer-fadezoom-demo'); // 例：<div id="drawer-fadezoom-demo">...

  // 主要ノードの参照（最小構成）
  const openBtn  = root.querySelector('[data-open]');    // 「開く」トリガーとなるボタン
  const closeBtn = root.querySelector('[data-close]');   // 「閉じる」トリガーとなるボタン
  const overlay  = root.querySelector('[data-overlay]'); // 背景の半透明＋blurのレイヤ
  const panel    = root.querySelector('.panel');         // ドロワー本体（中央ズームの箱）

  // --- 開く処理 -----------------------------------------
  //   1) 本体に .active を付与 → CSS で opacity/transform を遷移
  //   2) 背景に .active を付与 → CSS で opacity/backdrop-filter を遷移
  openBtn.addEventListener('click', () => {
    panel.classList.add('active');    // 本体：不可視→可視（ズーム1.0へ）
    overlay.classList.add('active');  // 背景：フェードイン＋ぼかしON
  });

  // --- 閉じる処理（ボタン）------------------------------
  //   1) 本体から .active を除去 → CSS でフェードアウト＆スケールダウン
  //   2) 背景から .active を除去 → CSS でフェードアウト＆ぼかしOFF
  closeBtn.addEventListener('click', () => {
    panel.classList.remove('active');   // 本体：可視→不可視（ズーム0.9へ）
    overlay.classList.remove('active'); // 背景：フェードアウト＋ぼかしOFF
  });

  // --- 閉じる処理（背景クリック）------------------------
  //   オーバーレイ自体をクリックしても閉じられるようにする
  overlay.addEventListener('click', () => {
    panel.classList.remove('active');   // 本体：閉じる
    overlay.classList.remove('active'); // 背景：閉じる
  });

  // --------------------------------------------
  // 補足（実装方針と拡張ポイント）：
  // ・今回は最小要件の操作（開/閉/背景クリック）に限定
  // ・キーボード対応（Escで閉じる、Tabトラップ、初期フォーカス移動等）は
  //   アクセシビリティ要件に応じて下記のように拡張可能：
  //
  //   document.addEventListener('keydown', (e) => {
  //     if (e.key === 'Escape' && panel.classList.contains('active')) {
  //       panel.classList.remove('active');
  //       overlay.classList.remove('active');
  //     }
  //   });
  //
  // ・アニメ時間は CSS 側の transition で集約管理（JSはクラス付け外しのみ）
  // ・複数インスタンスを同ページに置く場合は、root をそれぞれ分けて
  //   同スクリプトをスコープごとに実行することで衝突を回避可能
  // --------------------------------------------
})();