コピペで完結！ドロワーメニュー#10【ページ遷移後も開閉状態を記憶】

/* ===========================================
   ▼ CSS：#drawer-memory-section スコープ推奨
   localStorageで状態保持するドロワー用スタイル
   =========================================== */

/* -----------------------------------------------------
   セクション全体のスタイル設定
   （ドロワーメニュー機能のコンテナとなる）
----------------------------------------------------- */
#drawer-memory-section{
  position:relative; /* 内部の絶対配置要素（overlay/panelなど）の基準とする */
}

/* -----------------------------------------------------
   「メニューを開く」ボタンの基本スタイル
   ----------------------------------------------------- */
#drawer-memory-section .menu-btn{
  background:#0b6bff; /* 明るいブルーで視認性を確保 */
  color:#fff;         /* 背景とのコントラストを強調 */
  border:none;        /* デフォルトのボーダーを削除 */
  border-radius:8px;  /* 柔らかい角丸ボタンにする */
  padding:10px 16px;  /* 押しやすいタップ領域を確保 */
  cursor:pointer;     /* ホバー時にカーソルをポインタ表示 */
}

/* -----------------------------------------------------
   オーバーレイ（背景を半透明で覆うレイヤー）
   初期状態では非表示
----------------------------------------------------- */
#drawer-memory-section .overlay{
  position:fixed;            /* 画面全体を覆う固定配置 */
  inset:0;                   /* top, right, bottom, left をすべて0にして全画面に広げる */
  background:rgba(0,0,0,0.5);/* 背景を半透明の黒で覆い、背後の内容を暗くする */
  opacity:0;                 /* 初期は透明で見えない状態 */
  pointer-events:none;       /* 初期状態ではクリックを通過させる */
  transition:opacity .25s ease; /* フェードイン/アウトを滑らかにする */
}

/* -----------------------------------------------------
   オーバーレイがアクティブな時の状態（表示中）
----------------------------------------------------- */
#drawer-memory-section .overlay.active{
  opacity:1;           /* 不透明度を上げて表示する */
  pointer-events:auto; /* クリックを受け付ける（背景クリックで閉じるため） */
}

/* -----------------------------------------------------
   ドロワーパネル本体
   初期状態では右側の画面外に配置し、アクティブ時にスライドイン
----------------------------------------------------- */
#drawer-memory-section .panel{
  position:fixed;                   /* 画面に固定して常に右端に配置 */
  top:0;                            /* 上端から配置開始 */
  right:0;                          /* 右端に固定 */
  height:100dvh;                    /* ビューポート高いっぱい（モバイル対応） */
  width:min(86vw,340px);            /* 画面幅の86%か340pxの小さい方を採用 */
  background:#fff;                  /* 背景は白で内容を明確に */
  box-shadow:-6px 0 18px rgba(0,0,0,0.2); /* 影を付けて奥行きを演出 */
  transform:translateX(100%);       /* 初期状態では右に押し出して非表示 */
  transition:transform .3s ease;    /* スライドアニメーションを適用 */
  display:flex;                     /* 縦方向に要素を並べるためflexを利用 */
  flex-direction:column;            /* ヘッダーとコンテンツを縦に積む */
}

/* -----------------------------------------------------
   パネルがアクティブ状態になったとき
   transformを0に戻し、画面内にスライドインさせる
----------------------------------------------------- */
#drawer-memory-section .panel.active{
  transform:translateX(0); /* 画面内にスライドして表示 */
}

/* -----------------------------------------------------
   パネルヘッダー部分
   タイトルと「閉じる」ボタンを左右に配置
----------------------------------------------------- */
#drawer-memory-section .panel header{
  display:flex;                       /* 横並び配置 */
  justify-content:space-between;      /* 左右に要素を分ける */
  align-items:center;                 /* 垂直方向中央揃え */
  padding:14px 16px;                  /* 内側に余白をとり、操作しやすく */
  border-bottom:1px solid #e5e7eb;    /* 下線でヘッダーを区切る */
}

/* -----------------------------------------------------
   閉じるボタン（右上の「×」）
   シンプルな見た目でクリック可能に
----------------------------------------------------- */
#drawer-memory-section .close-btn{
  background:none;    /* 背景を消してアイコン的に見せる */
  border:none;        /* 不要なボーダーを削除 */
  font-size:18px;     /* 適度なサイズの「×」を表示 */
  cursor:pointer;     /* ホバー時にポインタ表示 */
}

<!-- ===========================================
     ▼ HTML：#drawer-memory-section 全体構造
     localStorageで開閉状態を保持（初回は閉じたまま）
     =========================================== -->

<section id="drawer-memory-section">
  <button type="button" class="menu-btn" data-open>メニューを開く</button>
  <div class="overlay" data-overlay hidden></div>
  <div class="panel" role="dialog" aria-modal="true" aria-label="ドロワーメニュー">
    <header>
      <strong>メニュー</strong>
      <button type="button" class="close-btn" data-close aria-label="閉じる">×</button>
    </header>
    <nav>
      <ul>
        <li><a href="#">トップページ</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">会社情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</section>

// ============================================
// ▼ JS：#drawer-memory-section スコープ推奨
//    localStorage + sessionStorage による状態保持
//    ・初回訪問（同一ブラウザセッション内の1回目）は自動オープンしない
//    ・2回目以降（リロード/同一サイト内遷移）のみ前回状態を復元
// ============================================

(function(){ // 即時実行関数でグローバル汚染を防止いたします
  // --------------------------------------------
  // 基本要素の参照を取得（存在しない場合は安全に終了）
  // --------------------------------------------
  const root = document.getElementById('drawer-memory-section'); // 機能全体のラッパー要素
  if(!root) return; // セクション自体が無い環境では何もしません

  const openBtn  = root.querySelector('[data-open]');   // 「メニューを開く」ボタン
  const closeBtn = root.querySelector('[data-close]');  // 「×（閉じる）」ボタン
  const overlay  = root.querySelector('[data-overlay]'); // 背景のオーバーレイ
  const panel    = root.querySelector('.panel');         // ドロワーパネル本体

  // --------------------------------------------
  // ストレージキー（記事固有にして他記事のデモと衝突回避）
  // --------------------------------------------
  const STORAGE_KEY = 'drawerState_v09';   // localStorage：開閉状態の永続化用
  const VISIT_KEY   = 'drawerVisited_v09'; // sessionStorage：同一セッション内の訪問有無

  // --------------------------------------------
  // 開く処理：UI反映 + 状態保存
  // --------------------------------------------
  function openDrawer(){
    panel.classList.add('active');    // CSSの .panel.active で右からスライドイン
    overlay.classList.add('active');  // 背景をフェードイン
    overlay.hidden = false;           // hidden属性を外し、フォーカス/クリック対象に
    localStorage.setItem(STORAGE_KEY, 'open'); // 「開いている」状態を保存（ページ再訪時に利用）
  }

  // --------------------------------------------
  // 閉じる処理：UI反映 + 状態保存
  // --------------------------------------------
  function closeDrawer(){
    panel.classList.remove('active');   // スライドアウトで非表示へ
    overlay.classList.remove('active'); // 背景フェードアウト
    overlay.hidden = true;              // hidden属性で操作対象から外す
    localStorage.setItem(STORAGE_KEY, 'close'); // 「閉じている」状態を保存
  }

  // --------------------------------------------
  // ユーザー操作イベントの登録
  // --------------------------------------------
  openBtn.addEventListener('click', openDrawer);   // 開くボタンでドロワーを開く
  closeBtn.addEventListener('click', closeDrawer); // 閉じるボタンでドロワーを閉じる
  overlay.addEventListener('click', closeDrawer);  // 背景クリックでも閉じる（直感的UI）

  // --------------------------------------------
  // 初期化：ページ読込時に状態を復元
  // ・初回訪問時は復元しない（勝手に開かない）
  // ・同一セッション内の2回目以降のみ復元
  // --------------------------------------------
  window.addEventListener('DOMContentLoaded', () => {
    const state   = localStorage.getItem(STORAGE_KEY);  // 'open' | 'close' | null
    const visited = sessionStorage.getItem(VISIT_KEY);  // 'true' | null

    // セッション初回訪問（visitedが未設定）のとき：
    // ここで訪問フラグを立てて何もせず終了 → 初回は閉じたまま開始
    if(!visited){
      sessionStorage.setItem(VISIT_KEY, 'true'); // 同一タブ/ウィンドウ内で以後は再訪扱い
      return;
    }

    // 2回目以降：保存状態が 'open' なら自動で開く（= 状態復元）
    // 'close' または null の場合は何もしない（デフォルト閉）
    if(state === 'open'){
      openDrawer();
    }
  });
})(); // 即時実行関数の終端