ページを移動しても開閉状態を記憶するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても開閉状態を記憶するドロワーメニューの作り方

ページを移動しても開閉状態を記憶するドロワーメニューの作り方を紹介します。このサンプルでは、ドロワーメニューを開いているか閉じているかをブラウザのlocalStorageへ保存します。ページを再読み込みした場合や、別のページへ移動してから戻った場合でも、最後に保存された開閉状態を読み込み、ドロワーメニューの状態を復元できます。

ドロワーメニューを開いたときは開いた状態をlocalStorageへ保存し、閉じるボタンや背景部分をクリックして閉じたときは保存内容を閉じた状態へ更新します。ページを表示したときにJavaScriptで保存済みの値を確認することで、利用者が最後に操作した開閉状態をそのまま反映できます。

複数ページで共通のナビゲーションを使用するサイトや管理画面など、ページを移動したあともドロワーメニューの状態を維持したい場面に利用できます。メニュー項目はHTMLから変更でき、CSSではドロワーメニューの横幅、配色、背景の暗さ、余白、開閉時のアニメーション速度などを調整できます。保存した状態には独自の有効期限を設定していないため、localStorageのデータが削除されるまで保持されます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>ページを移動しても開閉状態を記憶するドロワーメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ドロワーメニューを開く操作エリア -->
  <main class="remember-drawer-menu-state_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="remember-drawer-menu-state_title">
      開閉状態を記憶するドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="remember-drawer-menu-state_text">
      「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="remember-drawer-menu-state_open"
      type="button">
      メニューを開く
    </button>

  </main>

  <!-- ドロワーメニュー本体 -->
  <aside class="remember-drawer-menu-state_drawer">

    <!-- ドロワーメニューのタイトル -->
    <div class="remember-drawer-menu-state_heading">
      メニュー
    </div>

    <!-- ナビゲーションメニュー -->
    <nav class="remember-drawer-menu-state_nav">

      <!-- ホーム -->
      <a
        class="remember-drawer-menu-state_link"
        href="index.html?page=home">
        ホーム
      </a>

      <!-- サービス -->
      <a
        class="remember-drawer-menu-state_link"
        href="index.html?page=service">
        サービス
      </a>

      <!-- お知らせ -->
      <a
        class="remember-drawer-menu-state_link"
        href="index.html?page=news">
        お知らせ
      </a>

      <!-- お問い合わせ -->
      <a
        class="remember-drawer-menu-state_link"
        href="index.html?page=contact">
        お問い合わせ
      </a>

    </nav>

    <!-- ドロワーメニューを閉じるボタン -->
    <button
      class="remember-drawer-menu-state_close"
      type="button">
      閉じる
    </button>

  </aside>

  <!-- 補足説明 -->
  <p class="remember-drawer-menu-state_description">
    メニューを開いた状態で項目をクリックしてページを移動すると、開いた状態が復元されます。「閉じる」をクリックすると閉じた状態が保存されます。
  </p>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズへ含める */
}

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ドロワーメニューを開く操作エリア */
.remember-drawer-menu-state_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
}

/* 操作エリアのタイトル */
.remember-drawer-menu-state_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* 操作エリアの説明文 */
.remember-drawer-menu-state_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ドロワーメニューを開くボタン */
.remember-drawer-menu-state_open{
  padding:12px 26px; /* 上下12px・左右26pxの内側余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* ドロワーメニュー本体 */
.remember-drawer-menu-state_drawer{
  position:fixed; /* 画面左側へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  width:320px; /* ドロワーメニューの横幅 */
  max-width:85%; /* 画面幅の85%を超えないようにする */
  height:100%; /* 画面の高さいっぱいへ広げる */
  padding:32px 24px; /* 上下32px・左右24pxの内側余白 */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ表示する影 */
  transform:translateX(-100%); /* 初期状態では画面左外へ隠す */
  transition:transform .3s ease; /* 0.3秒で開閉する */
  font-family:sans-serif; /* 使用するフォント */
}

/* ドロワーメニューの表示状態 */
.remember-drawer-menu-state_drawer.is-active{
  transform:translateX(0); /* 画面内へ表示 */
}

/* ドロワーメニューのタイトル */
.remember-drawer-menu-state_heading{
  margin:0 0 28px; /* 下側28pxの余白 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* ナビゲーションメニュー */
.remember-drawer-menu-state_nav{
  display:flex; /* メニュー項目を並べる */
  flex-direction:column; /* 縦並びにする */
  gap:10px; /* メニュー項目同士の間隔 */
  margin-bottom:28px; /* 閉じるボタンとの間隔 */
}

/* ナビゲーションリンク */
.remember-drawer-menu-state_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:14px 16px; /* 上下14px・左右16pxの内側余白 */
  border-radius:8px; /* リンクの角丸 */
  background:#f1f5f9; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  text-decoration:none; /* 下線を非表示 */
  font-weight:700; /* リンク文字を太字にする */
}

/* ドロワーメニューを閉じるボタン */
.remember-drawer-menu-state_close{
  width:100%; /* ドロワーメニューの横幅いっぱいへ表示 */
  padding:12px; /* 内側余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 補足説明 */
.remember-drawer-menu-state_description{
  margin-top:24px; /* 上側24pxの余白 */
  color:#4b5563; /* 補足説明の文字色 */
  text-align:center; /* 中央揃え */
  line-height:1.8; /* 補足説明の行間 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ縮小 */
  }

  /* スマートフォン用の操作エリア */
  .remember-drawer-menu-state_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン用のドロワーメニュー */
  .remember-drawer-menu-state_drawer{
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

}

// localStorageで使用する保存名
const rememberDrawerMenuStateKey =
  "rememberDrawerMenuState";

// ドロワーメニューを開くボタンを取得
const rememberDrawerMenuStateOpen =
  document.querySelector(
    ".remember-drawer-menu-state_open"
  );

// ドロワーメニューを閉じるボタンを取得
const rememberDrawerMenuStateClose =
  document.querySelector(
    ".remember-drawer-menu-state_close"
  );

// ドロワーメニュー本体を取得
const rememberDrawerMenuStateDrawer =
  document.querySelector(
    ".remember-drawer-menu-state_drawer"
  );

// ドロワーメニューを開く処理
function openRememberDrawerMenuState(){

  // 表示用クラスを追加
  rememberDrawerMenuStateDrawer.classList.add(
    "is-active"
  );

  // 開いた状態をlocalStorageへ保存
  localStorage.setItem(
    rememberDrawerMenuStateKey,
    "open"
  );

}

// ドロワーメニューを閉じる処理
function closeRememberDrawerMenuState(){

  // 表示用クラスを削除
  rememberDrawerMenuStateDrawer.classList.remove(
    "is-active"
  );

  // 閉じた状態をlocalStorageへ保存
  localStorage.setItem(
    rememberDrawerMenuStateKey,
    "closed"
  );

}

// localStorageから保存済みの開閉状態を取得
const savedRememberDrawerMenuState =
  localStorage.getItem(
    rememberDrawerMenuStateKey
  );

// 開いた状態が保存されている場合
if(savedRememberDrawerMenuState === "open"){

  // ドロワーメニューを開いた状態へ復元
  rememberDrawerMenuStateDrawer.classList.add(
    "is-active"
  );

}

// 開くボタンをクリックした時
rememberDrawerMenuStateOpen.addEventListener(
  "click",
  function(){

    // ドロワーメニューを開く
    openRememberDrawerMenuState();

  }
);

// 閉じるボタンをクリックした時
rememberDrawerMenuStateClose.addEventListener(
  "click",
  function(){

    // ドロワーメニューを閉じる
    closeRememberDrawerMenuState();

  }
);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニューを開くボタン、メニュー項目、閉じるボタンを配置し、CSSでは画面左側から表示されるドロワーメニューのサイズや配色、余白、開閉時の動きを設定します。JavaScriptではlocalStorageを使用して開閉状態を保存し、ページを移動したあとも最後の状態を復元します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはドロワーメニュー全体を構成するファイルです。「メニューを開く」ボタン、ドロワーメニューのタイトル、ホーム・サービス・お知らせ・お問い合わせのリンク、「閉じる」ボタンなどを編集できます。各リンクのhrefを変更すると、移動先を用途に合わせて変更できます。

style.cssはドロワーメニューと操作エリアのデザインを設定するファイルです。操作エリアの横幅や余白、背景色、ボタンの色、ドロワーメニューの横幅、メニュー項目の間隔、角丸、影、開閉速度などを変更できます。

script.jsはドロワーメニューの開閉と状態保存を行うファイルです。「メニューを開く」をクリックするとドロワーメニューを表示して開いた状態をlocalStorageへ保存し、「閉じる」をクリックするとドロワーメニューを閉じて閉じた状態を保存します。ページ読み込み時には保存されている値を確認し、最後に開いた状態が保存されている場合はドロワーメニューを自動的に開いた状態へ復元します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsの3ファイルを配置し、すべて同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。

ドロワーメニューを開いた状態で「ホーム」「サービス」「お知らせ」「お問い合わせ」のいずれかをクリックすると、リンク先へ移動します。開いた状態はlocalStorageへ保存されているため、移動後にページが読み込まれるとドロワーメニューが開いた状態へ復元されます。「閉じる」をクリックするとメニューが閉じ、その状態が保存されます。

カスタマイズできる内容
index.htmlでは操作エリアのタイトルや説明文、ドロワーメニューのタイトル、各メニュー項目の表示文字とリンク先を変更できます。メニュー項目を追加・削除する場合は、remember-drawer-menu-state_linkクラスを付けたリンクを編集します。

style.cssでは操作エリアやドロワーメニューの背景色、文字色、ボタンの色、横幅、余白、角丸、影、メニュー項目の間隔などを変更できます。また、transition:transform .3s ease;を変更すると、ドロワーメニューが画面左側から開閉する速度を調整できます。

script.jsではrememberDrawerMenuStateKeyに指定している"rememberDrawerMenuState"がlocalStorageへ保存するときの名前です。同じ仕組みを別のドロワーメニューへ使用する場合は、保存名が重複しないよう変更できます。

数値調整
style.css
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
操作エリアのタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

padding:12px 26px;
「メニューを開く」ボタンの内側余白です。上下の12pxで高さ、左右の26pxで横方向の余白を調整できます。

width:320px;
ドロワーメニューの横幅です。値を大きくするとメニューが横に広がり、小さくすると細くなります。

max-width:85%;
ドロワーメニューが画面幅に対して占める最大割合です。画面が狭い場合でもドロワーメニューが画面幅の85%を超えないようにします。

padding:32px 24px;
ドロワーメニュー内側の余白です。上下の32pxと左右の24pxを変更すると、メニュー内容と画面端との間隔を調整できます。

box-shadow:12px 0 30px rgba(15,23,42,.18);
ドロワーメニュー右側の影です。12pxで横方向の位置、30pxでぼかしの広がり、0.18で影の濃さを調整できます。

transition:transform .3s ease;
ドロワーメニューが開閉する時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く開閉します。

gap:10px;
メニュー項目同士の間隔です。値を大きくすると項目同士が離れ、小さくすると間隔が狭くなります。

margin-bottom:28px;
ナビゲーションと「閉じる」ボタンの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの操作エリアにはwidth:100%とmax-width:700pxを指定し、ドロワーメニューにはwidth:320pxとmax-width:85%を指定しているため、画面幅が狭くなった場合も横幅に合わせて縮小されます。

また、画面幅640px以下ではmedia queryによってページ全体の余白を24px 16px、操作エリアとドロワーメニューの内側余白を小さくしています。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。