複数ドロワーメニューを切り替えて表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

複数ドロワーメニューを切り替えて表示する方法

複数ドロワーメニューを切り替えて表示する方法を紹介します。このサンプルでは、「メニューA」と「メニューB」の2つのドロワーメニューを用意し、ボタンをクリックするだけで表示する内容を切り替えられます。用途ごとに異なるメニューを表示したい場合や、管理画面・会員画面・サービス紹介などでメニューを分けたい場面に便利です。

ドロワーメニューは画面左側からスライド表示され、背景をクリックするか閉じるボタン、またはメニュー項目をクリックすると閉じます。別のメニューボタンを押した場合は、現在表示中のドロワーメニューを閉じてから切り替えるため、複数のメニューが重なって表示されることはありません。

HTML・CSS・JavaScriptだけで動作するため、そのままWebサイトへ組み込めます。メニュー項目・色・横幅・アニメーション速度なども自由に変更できるので、自分のサイトに合わせたドロワーメニューへ簡単にカスタマイズできます。

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

サンプルコードのご利用は自己責任でお願いいたします。

デモ

複数ドロワーメニュー

メニューA・メニューBをクリックすると、それぞれ別のドロワーメニューを表示します。

ボタンごとに異なるドロワーメニューを切り替えて表示できます。

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

<!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="multiple-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="multiple-drawer-menu_title">
      複数ドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="multiple-drawer-menu_text">
      ボタンをクリックすると、それぞれ異なるドロワーメニューを表示します。
    </p>

    <!-- ドロワーメニューを開くボタンのグループ -->
    <div class="multiple-drawer-menu_buttons">

      <!-- メニューAを開くボタン -->
      <button
        class="multiple-drawer-menu_open"
        type="button"
        data-multiple-drawer-menu-open="menu-a">
        メニューA
      </button>

      <!-- メニューBを開くボタン -->
      <button
        class="multiple-drawer-menu_open"
        type="button"
        data-multiple-drawer-menu-open="menu-b">
        メニューB
      </button>

    </div>

  </main>

  <!-- ドロワーメニュー表示中の背景 -->
  <div
    class="multiple-drawer-menu_overlay"
    data-multiple-drawer-menu-overlay>
  </div>

  <!-- ドロワーメニューA -->
  <aside
    class="multiple-drawer-menu_drawer"
    data-multiple-drawer-menu-drawer="menu-a"
    aria-hidden="true">

    <!-- ドロワーメニュー上部 -->
    <div class="multiple-drawer-menu_header">

      <!-- ドロワーメニューのタイトル -->
      <div class="multiple-drawer-menu_heading">
        メニューA
      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="multiple-drawer-menu_close"
        type="button"
        data-multiple-drawer-menu-close
        aria-label="メニューAを閉じる">
      </button>

    </div>

    <!-- メニューAのナビゲーション -->
    <nav
      class="multiple-drawer-menu_nav"
      aria-label="メニューA">

      <a
        class="multiple-drawer-menu_link"
        href="#home"
        data-multiple-drawer-menu-link>
        ホーム
      </a>

      <a
        class="multiple-drawer-menu_link"
        href="#service"
        data-multiple-drawer-menu-link>
        サービス
      </a>

      <a
        class="multiple-drawer-menu_link"
        href="#company"
        data-multiple-drawer-menu-link>
        会社概要
      </a>

    </nav>

  </aside>

  <!-- ドロワーメニューB -->
  <aside
    class="multiple-drawer-menu_drawer"
    data-multiple-drawer-menu-drawer="menu-b"
    aria-hidden="true">

    <!-- ドロワーメニュー上部 -->
    <div class="multiple-drawer-menu_header">

      <!-- ドロワーメニューのタイトル -->
      <div class="multiple-drawer-menu_heading">
        メニューB
      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="multiple-drawer-menu_close"
        type="button"
        data-multiple-drawer-menu-close
        aria-label="メニューBを閉じる">
      </button>

    </div>

    <!-- メニューBのナビゲーション -->
    <nav
      class="multiple-drawer-menu_nav"
      aria-label="メニューB">

      <a
        class="multiple-drawer-menu_link"
        href="#blog"
        data-multiple-drawer-menu-link>
        ブログ
      </a>

      <a
        class="multiple-drawer-menu_link"
        href="#price"
        data-multiple-drawer-menu-link>
        料金
      </a>

      <a
        class="multiple-drawer-menu_link"
        href="#contact"
        data-multiple-drawer-menu-link>
        お問い合わせ
      </a>

    </nav>

  </aside>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box;
}

/* ページ全体 */
body{
  margin:0;
  padding:40px 20px;
  background:#ffffff;
  color:#111827;
  font-family:sans-serif;
}

/* 操作エリア */
.multiple-drawer-menu_wrap{
  width:100%;
  max-width:720px;
  margin:40px auto;
  padding:32px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  text-align:center;
}

/* タイトル */
.multiple-drawer-menu_title{
  margin:0 0 12px;
  font-size:24px;
  font-weight:700;
  line-height:1.5;
}

/* 説明文 */
.multiple-drawer-menu_text{
  margin:0 0 24px;
  color:#4b5563;
  line-height:1.8;
}

/* ボタンを横並び */
.multiple-drawer-menu_buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* 開くボタン */
.multiple-drawer-menu_open{
  padding:12px 26px;
  border:none;
  border-radius:8px;
  background:#2563eb;
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

/* 背景 */
.multiple-drawer-menu_overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(15,23,42,.6);
  opacity:0;
  visibility:hidden;
  transition:
    opacity .3s,
    visibility .3s; /* 0.3秒で背景を表示・非表示 */
}

/* 背景表示 */
.multiple-drawer-menu_overlay.is-active{
  opacity:1;
  visibility:visible;
}

/* ドロワーメニュー */
.multiple-drawer-menu_drawer{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  width:320px;
  max-width:85%;
  height:100vh;
  padding:28px 24px;
  background:#ffffff;
  box-shadow:12px 0 30px rgba(15,23,42,.18);
  transform:translateX(calc(-100% - 40px));
  transition:transform .35s ease; /* 0.35秒でスライド表示 */
  overflow-y:auto;
}

/* ドロワーメニュー表示 */
.multiple-drawer-menu_drawer.is-active{
  transform:translateX(0);
}

/* ヘッダー */
.multiple-drawer-menu_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

/* タイトル */
.multiple-drawer-menu_heading{
  margin:0;
  font-size:26px;
  font-weight:700;
}

/* 閉じるボタン */
.multiple-drawer-menu_close{
  position:relative;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#f8fafc;
  cursor:pointer;
  flex-shrink:0;
}

/* ×印 */
.multiple-drawer-menu_close::before,
.multiple-drawer-menu_close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:2px;
  background:#111827;
  border-radius:2px;
}

.multiple-drawer-menu_close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.multiple-drawer-menu_close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* メニュー一覧 */
.multiple-drawer-menu_nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* メニューリンク */
.multiple-drawer-menu_link{
  display:block;
  padding:16px 18px;
  border-radius:10px;
  background:#f1f5f9;
  color:#111827;
  text-decoration:none;
  font-size:17px;
  font-weight:700;
}

/* ホバー */
.multiple-drawer-menu_link:hover{
  background:#dbeafe;
  color:#1d4ed8;
}

/* スマートフォン */
@media(max-width:640px){

  body{
    padding:24px 16px;
  }

  .multiple-drawer-menu_wrap{
    padding:24px 18px;
  }

  .multiple-drawer-menu_drawer{
    padding:24px 18px;
  }

}

// ドロワーメニューを開くボタンをすべて取得
const multipleDrawerMenuOpenButtons=document.querySelectorAll(
  "[data-multiple-drawer-menu-open]"
);

// ドロワーメニューを閉じるボタンをすべて取得
const multipleDrawerMenuCloseButtons=document.querySelectorAll(
  "[data-multiple-drawer-menu-close]"
);

// 背景を取得
const multipleDrawerMenuOverlay=document.querySelector(
  "[data-multiple-drawer-menu-overlay]"
);

// ドロワーメニューをすべて取得
const multipleDrawerMenuDrawers=document.querySelectorAll(
  "[data-multiple-drawer-menu-drawer]"
);

// ドロワーメニュー内のリンクをすべて取得
const multipleDrawerMenuLinks=document.querySelectorAll(
  "[data-multiple-drawer-menu-link]"
);

// すべてのドロワーメニューを閉じる共通処理
function closeMultipleDrawerMenus(){

  // 背景を非表示
  multipleDrawerMenuOverlay.classList.remove("is-active");

  // すべてのドロワーメニューを閉じる
  multipleDrawerMenuDrawers.forEach(function(drawer){

    drawer.classList.remove("is-active");
    drawer.setAttribute("aria-hidden","true");

  });

}

// 指定したドロワーメニューを開く共通処理
function openMultipleDrawerMenu(menuName){

  // すべてのドロワーメニューを閉じる
  closeMultipleDrawerMenus();

  // 開く対象のドロワーメニューを取得
  const targetDrawer=document.querySelector(
    '[data-multiple-drawer-menu-drawer="' + menuName + '"]'
  );

  // 対象が存在しない場合は処理を終了
  if(!targetDrawer){
    return;
  }

  // 背景を表示
  multipleDrawerMenuOverlay.classList.add("is-active");

  // 対象のドロワーメニューを表示
  targetDrawer.classList.add("is-active");
  targetDrawer.setAttribute("aria-hidden","false");

}

// 各開くボタンへクリック処理を設定
multipleDrawerMenuOpenButtons.forEach(function(button){

  button.addEventListener("click",function(){

    // ボタンに設定されたメニュー名を取得
    const menuName=button.dataset.multipleDrawerMenuOpen;

    // 対応するドロワーメニューを開く
    openMultipleDrawerMenu(menuName);

  });

});

// 各閉じるボタンへクリック処理を設定
multipleDrawerMenuCloseButtons.forEach(function(button){

  button.addEventListener("click",function(){

    // すべてのドロワーメニューを閉じる
    closeMultipleDrawerMenus();

  });

});

// 背景をクリックした時
multipleDrawerMenuOverlay.addEventListener("click",function(){

  // すべてのドロワーメニューを閉じる
  closeMultipleDrawerMenus();

});

// 各メニューリンクへクリック処理を設定
multipleDrawerMenuLinks.forEach(function(link){

  link.addEventListener("click",function(){

    // すべてのドロワーメニューを閉じる
    closeMultipleDrawerMenus();

  });

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。2種類のドロワーメニューを用意し、クリックしたボタンに応じて表示するメニューを切り替えられます。HTMLではページやメニューの構造、CSSではレイアウトやスライドアニメーション、JavaScriptではメニューの切り替えや開閉処理を担当しています。

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

各ファイルの役割
index.html
ページ本体と2種類のドロワーメニューを定義しています。タイトルや説明文、ボタン名、メニュー項目を変更できます。

style.css
ドロワーメニューのデザインや横幅、背景色、余白、影、スライドアニメーションを設定しています。

script.js
ボタンごとのメニュー切り替え、ドロワーメニューの開閉、背景クリック、閉じるボタン、メニュークリック時の処理を記述しています。

設置方法・使い方
sampleフォルダ内のファイルをそのまま配置します。
index.htmlをブラウザで開くと利用できます。メニューAまたはメニューBをクリックすると対応するドロワーメニューが表示されます。閉じるボタン、背景部分、またはメニュー項目をクリックするとメニューを閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、各ドロワーメニューのタイトル、メニュー項目を変更できます。
style.cssではメニューの横幅、背景色、文字色、余白、角丸、影、アニメーション速度などを変更できます。
script.jsでは表示するメニューの切り替え方法や開閉処理を変更できます。

数値調整
style.css
width:320px;
ドロワーメニューの横幅です。値を変更するとメニューの幅が変わります。

max-width:85%;
小さい画面での最大幅です。値を変更するとスマートフォン表示時の横幅が変わります。

transition:transform .35s ease;
0.35秒でドロワーメニューが開閉します。値を大きくするとゆっくり、小さくすると速く動作します。

transition:opacity .3s;
オーバーレイを0.3秒で表示・非表示にします。値を変更するとフェード速度が変わります。

レスポンシブ対応
style.cssでレスポンシブ対応しています。max-width:85%により画面幅に合わせてドロワーメニューが縮小され、@media (max-width:640px)では余白を調整しています。スマートフォン・タブレット・PCで利用できます。