コピペで完結！ドロワーメニュー#05【メニュー表示で背景をぼかす】

/* =========================================================
  半透明ブラー背景付きドロワー（右）— 完全版 CSS
  ・背景は backdrop-filter でブラー
  ・[data-open="1"] の付与/削除で開閉制御
  ・トリガーボタン（#openDrawerBtn / .btn）に確実にスタイルを適用
    └ WPテーマの既定ボタンに負けないように appearance/border 等をリセット
========================================================= */

/* --------------------------------
   0) トリガーボタン（開くボタン）
   - HTML例：<button id="openDrawerBtn" class="btn">メニューを開く</button>
   - #openDrawerBtn と .btn の両方を指定し、WP既定を打ち消して青ボタン化
-------------------------------- */
button#openDrawerBtn,          /* id優先（特異性を上げて確実に適用） */
button.btn,                    /* button要素に .btn が付いた場合 */
.btn{                          /* a.btn にも効かせるための保険 */
  -webkit-appearance:none;     /* iOS等の既定外観を無効化 */
  appearance:none;             /* 各ブラウザの既定外観を無効化 */
  background:#0b6bff;          /* アクセントの青い背景 */
  color:#fff;                  /* 文字色は白 */
  border:none;                 /* 枠線をリセット */
  box-shadow:none;             /* 既定のシャドウを除去（WP対策） */
  border-radius:12px;          /* 角丸でボタンらしく */
  padding:10px 14px;           /* タップしやすい余白 */
  line-height:1.2;             /* ボタン内の行高を詰める */
  font:inherit;                /* 親のフォント設定を継承 */
  display:inline-block;        /* 幅・高さを素直に扱えるように */
  text-decoration:none;        /* a.btn の下線を消す */
  cursor:pointer;              /* マウスポインタを指マークに */
}
button#openDrawerBtn:hover,
button.btn:hover,
.btn:hover{
  opacity:.92;                 /* ホバーでわずかに暗くして反応を出す */
}
button#openDrawerBtn:active,
button.btn:active,
.btn:active{
  transform:translateY(1px);   /* クリック時に1px沈ませる */
}
button#openDrawerBtn:focus-visible,
button.btn:focus-visible,
.btn:focus-visible{
  outline:2px solid #93c5fd;   /* キーボード操作時の可視フォーカス */
  outline-offset:2px;          /* 枠を外側にずらして見やすく */
}

/* --------------------------------
   1) ドロワーの土台（必要に応じて position などを追加）
-------------------------------- */
.drawer{                        /* ルート。現状は特に指定不要（状態は data-open で管理） */ }

/* --------------------------------
   2) オーバーレイ（半透明＋ブラー）
   - ブラウザ対応のため -webkit-backdrop-filter も併記
-------------------------------- */
.drawer .overlay{
  position:fixed;               /* 画面全体を覆う */
  inset:0;                      /* top/right/bottom/left: 0 を一括指定 */
  z-index:9998;                 /* パネルより一段下に配置 */
  background:rgba(2,8,23,.35);  /* 半透明の下地（ブラーと併用） */
  -webkit-backdrop-filter:blur(12px); /* Safari等の前置き版 */
  backdrop-filter:blur(12px);          /* 主要ブラウザのブラー */
  opacity:0;                    /* 初期は非表示 */
  pointer-events:none;          /* 初期はクリック無効（背面操作を妨げない） */
  transition:opacity .28s ease-out; /* フェードイン/アウト */
}

/* --------------------------------
   3) パネル本体（右からスライドイン）
-------------------------------- */
.drawer .panel{
  position:fixed;               /* ビューポート基準に固定 */
  top:0;                        /* 上端に貼り付け */
  right:0;                      /* 右端から出す */
  z-index:9999;                 /* 最前面に配置（オーバーレイより上） */
  height:100dvh;                /* 端末UIに強いvh単位で全高 */
  width:min(86vw,360px);        /* 画面幅86%か360pxの小さい方 */
  background:#fff;              /* パネルの背景は白 */
  color:#0f172a;                /* 文字色（濃いインク色） */
  border-left:1px solid #e5e7eb;/* 画面との区切り線（左辺） */
  box-shadow:-10px 0 32px rgba(2,8,23,.18); /* 左方向へ落ちる影 */
  transform:translateX(100%);   /* 初期は画面外（右）へ退避 */
  transition:transform .32s cubic-bezier(.22,.9,.24,1); /* スライドの動き */
  display:flex;                 /* 中身を縦積みレイアウトに */
  flex-direction:column;        /* ヘッダー→本文の順で縦方向 */
}

/* パネル内ヘッダー（タイトル＋閉じる） */
.drawer .panel header{
  display:flex;                 /* タイトルとボタンを横並び */
  align-items:center;           /* 縦方向中央揃え */
  justify-content:space-between;/* 左右に振り分け */
  padding:14px 16px;            /* 内側余白（タップしやすさも確保） */
  border-bottom:1px solid #e5e7eb;/* 下辺の区切り線 */
  background:#fff;              /* スクロール時も白背景を維持 */
  position:sticky;              /* ヘッダーを上部に固定 */
  top:0;                        /* 固定位置：上端 */
}
.drawer .panel h3{
  margin:0;                     /* 既定の上下余白をリセット */
  font-size:16px;               /* 見出しサイズ（モバイル基準） */
}
.drawer .close{
  background:#fff;              /* 背景白（透過時の読みやすさ） */
  border:1px solid #e5e7eb;     /* 薄い枠線でボタン感を出す */
  border-radius:10px;           /* 角丸 */
  padding:6px 10px;             /* クリック領域の確保 */
  cursor:pointer;               /* クリック可能であることを示す */
}

/* コンテンツ（例：ナビ） */
.drawer nav{
  display:grid;                 /* 縦並び＋gap で間隔管理 */
  gap:8px;                      /* 各項目の間隔 */
  padding:12px;                 /* 内側余白 */
}
.drawer nav a{
  display:block;                /* 全幅のタップ領域に */
  padding:10px 12px;            /* クリックしやすい余白 */
  border-radius:10px;           /* 角丸 */
  color:#0f172a;                /* テキスト色 */
  text-decoration:none;         /* 下線を消す */
}
.drawer nav a:hover{
  background:#f8fafc;           /* ホバー時の薄いハイライト */
}

/* --------------------------------
   4) 開いた状態（オーバーレイON + パネルIN）
-------------------------------- */
.drawer[data-open="1"] .overlay{
  opacity:1;                    /* オーバーレイを表示 */
  pointer-events:auto;          /* 背景クリックで閉じられる */
}
.drawer[data-open="1"] .panel{
  transform:translateX(0);      /* パネルを画面内へスライドイン */
}

/* --------------------------------
   5) 背景スクロールロック（必要な場合に body へ付与）
-------------------------------- */
body.is-locked{
  overflow:hidden;              /* 背景をスクロール不可に */
  touch-action:none;            /* モバイルでのスワイプ抑止 */
}

/* --------------------------------
   6) ブラー非対応ブラウザのフォールバック
-------------------------------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .drawer .overlay{
    background:rgba(2,8,23,.55);/* ぼかし無しでも視認性が出るよう濃くする */
  }
}

<!-- =========================================================
  半透明ブラー背景付きドロワー（右）— HTML
  ・この <div class="drawer"> がドロワー一式のラッパー
  ・オーバーレイ（.overlay）と本体パネル（.panel）で構成
  ・開閉は JS から drawer（ラッパー）に data-open="1" を付与/削除
  ・アクセシビリティ：role="dialog" / aria-modal / aria-labelledby / tabindex
========================================================= -->

<!-- 1) ドロワー本体（画面右からスライド） -->
<div class="drawer" id="drawerRoot" aria-hidden="true">
  <!-- 1-1) オーバーレイ（半透明＋ブラー）
       - クリックで閉じる（JS側で .overlay に click ハンドラ）
       - aria-hidden="true"：読み上げ対象外 -->
  <div class="overlay" id="drawerOverlay" aria-hidden="true"></div>

  <!-- 1-2) パネル本体（右端固定）
       - role="dialog"：ダイアログ扱い
       - aria-modal="true"：背景をモーダルとして扱う宣言
       - aria-labelledby：見出し要素の id を参照
       - tabindex="-1"：開いた直後に focus() を当てるため -->
  <aside class="panel"
         id="drawerPanel"
         role="dialog"
         aria-modal="true"
         aria-labelledby="drawerTitle"
         tabindex="-1">

    <!-- 1-2-1) ヘッダー（タイトル＋閉じるボタン）
         - タイトルの id は aria-labelledby と一致させる -->
    <header>
      <h3 id="drawerTitle">メニュー</h3>

      <!-- 閉じるボタン
           - aria-label で機能を明示
           - JS で click => 閉じる -->
      <button class="close" id="closeDrawerBtn" aria-label="ドロワーを閉じる">閉じる</button>
    </header>

    <!-- 1-2-2) コンテンツ（例：サイト内メニュー）
         - aria-label で領域名を付与 -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </aside>
</div>

<!-- 2) 開くトリガーボタン
     - CSS の特異性対策のため、id と class を両方付与（#openDrawerBtn, .btn）
     - aria-haspopup="dialog"：押すとダイアログが開くことを示す
     - aria-controls="drawerPanel"：関連するダイアログ要素の id を参照 -->
<button id="openDrawerBtn" class="btn"
        aria-haspopup="dialog"
        aria-controls="drawerPanel">メニューを開く</button>

// =========================================================
// 半透明ブラー背景付きドロワー（右）— JavaScript
// ・クリック/ESC/背景クリックで開閉
// ・開いたらフォーカス移動、閉じたら元へ復帰
// ・Tabキーの簡易フォーカストラップを実装
// ・背景スクロールロック（body.is-locked）を付与/解除
// =========================================================
(function(){
  // --- 要素参照（存在しない場合は安全に中断） -----------------------
  const root   = document.getElementById('drawerRoot');      // .drawer（ラッパー）
  const panel  = document.getElementById('drawerPanel');     // .panel（ダイアログ本体）
  const overlay= document.getElementById('drawerOverlay');   // .overlay（背景ブラー）
  const openBtn= document.getElementById('openDrawerBtn');   // 「開く」ボタン
  const closeBtn = document.getElementById('closeDrawerBtn');// 「閉じる」ボタン
  if(!root || !panel || !openBtn){ return; }                 // 必須が欠けていれば何もしない

  let lastFocus = null; // 直前にフォーカスしていた要素（閉じた後に戻す）

  // --- 開く -----------------------------------------------------------
  function open(){
    lastFocus = document.activeElement;               // 復帰先を記録
    root.setAttribute('data-open','1');               // CSSに開状態を通知
    document.body.classList.add('is-locked');         // 背景スクロールロック

    // レイアウト反映後にパネルへフォーカス（tabindex="-1" 必須）
    requestAnimationFrame(()=> panel.focus());

    // ESCやTab制御を有効化
    document.addEventListener('keydown', onKey);
  }

  // --- 閉じる ---------------------------------------------------------
  function close(){
    root.removeAttribute('data-open');                // 閉状態へ
    document.body.classList.remove('is-locked');      // スクロールロック解除
    document.removeEventListener('keydown', onKey);   // キー監視を外す

    // 開く前にフォーカスしていた要素に戻す（ボタン等）
    if(lastFocus && typeof lastFocus.focus === 'function'){
      lastFocus.focus();
    }
  }

  // --- キーハンドラ（ESCで閉じる、Tabでフォーカスを囲い込む） --------
  function onKey(e){
    // ESCキーで閉じる
    if(e.key === 'Escape'){ close(); return; }

    // ドロワー開状態でのフォーカストラップ
    if(e.key === 'Tab' && root.getAttribute('data-open') === '1'){
      // フォーカス可能要素を列挙（disabled除外）
      const focusables = panel.querySelectorAll(
        'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
      );
      const list = Array.from(focusables).filter(el => !el.disabled);

      // 何も無ければパネル自身に留める
      if(!list.length){ e.preventDefault(); panel.focus(); return; }

      const first = list[0];
      const last  = list[list.length - 1];

      // Shift+Tab で先頭から外へ出ないよう最後へループ
      if(e.shiftKey && document.activeElement === first){
        e.preventDefault(); last.focus(); return;
      }
      // Tab で末尾から外へ出ないよう先頭へループ
      if(!e.shiftKey && document.activeElement === last){
        e.preventDefault(); first.focus(); return;
      }
    }
  }

  // --- イベントバインド ----------------------------------------------
  // 開く
  openBtn.addEventListener('click', open);

  // 閉じる（ボタン／オーバーレイクリック）
  closeBtn && closeBtn.addEventListener('click', close);
  overlay && overlay.addEventListener('click', close);
})();