アコーディオン付きドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

見出し・内容・開閉方法・色・サイズ・アイコンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

アコーディオン付きドロワーメニューを作る方法

アコーディオン付きドロワーメニューを作る方法を紹介します。メニューを開くと親メニューが一覧表示され、クリックすると子メニューが展開されるサンプルです。限られたスペースでも多くのメニューを整理して表示できるため、スマートフォン向けのナビゲーションにも適しています。

このサンプルでは、HTML・CSS・JavaScriptだけで実装しています。ドロワーメニューの開閉だけでなく、親メニューごとにアコーディオンを切り替えられるため、サービス一覧やカテゴリー一覧、サポート情報などを階層構造で見やすく表示できます。

メニュー名や子メニューの内容、色やサイズ、余白なども自由に変更できます。シンプルな構成なので、企業サイトやポートフォリオ、ブログなどさまざまなWebサイトへそのまま導入しやすいサンプルコードです。

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

サンプルコードのご利用によって発生した損害について、当サイトでは一切の責任を負いかねます。

デモ

アコーディオン付きドロワーメニュー

「メニューを開く」をクリックすると、アコーディオン付きのドロワーメニューを表示します。

メニュー

親メニューをクリックすると、子メニューが開閉します。

「メニューを開く」をクリックすると左側から表示されます。親メニューをクリックすると子メニューが開閉し、閉じるボタン、背景部分、または子メニューをクリックするとドロワーメニューが閉じます。

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

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

    <!-- 操作エリアのタイトル -->
    <div class="accordion-drawer-menu_title">
      アコーディオン付きドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="accordion-drawer-menu_text">
      「メニューを開く」をクリックすると、アコーディオン付きのドロワーメニューを表示します。
    </p>

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

  </main>

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

  <!-- ドロワーメニュー本体 -->
  <aside
    class="accordion-drawer-menu_drawer"
    data-accordion-drawer-menu-drawer
    aria-hidden="true">

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

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

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

    </div>

    <!-- アコーディオンの説明文 -->
    <p class="accordion-drawer-menu_drawer-text">
      親メニューをクリックすると、子メニューが開閉します。
    </p>

    <!-- アコーディオン付きナビゲーション -->
    <nav
      class="accordion-drawer-menu_nav"
      aria-label="メインメニュー">

      <!-- サービスのアコーディオン -->
      <div class="accordion-drawer-menu_group">

        <!-- 親メニュー -->
        <button
          class="accordion-drawer-menu_parent"
          type="button"
          aria-expanded="false">
          サービス
        </button>

        <!-- 子メニュー -->
        <div class="accordion-drawer-menu_child">

          <div class="accordion-drawer-menu_child-inner">

            <a
              class="accordion-drawer-menu_link"
              href="#web-production"
              data-accordion-drawer-menu-link>
              Web制作
            </a>

            <a
              class="accordion-drawer-menu_link"
              href="#system-development"
              data-accordion-drawer-menu-link>
              システム開発
            </a>

            <a
              class="accordion-drawer-menu_link"
              href="#maintenance-support"
              data-accordion-drawer-menu-link>
              保守サポート
            </a>

          </div>

        </div>

      </div>

      <!-- お知らせのアコーディオン -->
      <div class="accordion-drawer-menu_group">

        <!-- 親メニュー -->
        <button
          class="accordion-drawer-menu_parent"
          type="button"
          aria-expanded="false">
          お知らせ
        </button>

        <!-- 子メニュー -->
        <div class="accordion-drawer-menu_child">

          <div class="accordion-drawer-menu_child-inner">

            <a
              class="accordion-drawer-menu_link"
              href="#news"
              data-accordion-drawer-menu-link>
              新着情報
            </a>

            <a
              class="accordion-drawer-menu_link"
              href="#event"
              data-accordion-drawer-menu-link>
              イベント
            </a>

            <a
              class="accordion-drawer-menu_link"
              href="#update-history"
              data-accordion-drawer-menu-link>
              更新履歴
            </a>

          </div>

        </div>

      </div>

    </nav>

  </aside>

  <!-- 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; /* ページ全体のフォント */
}

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

/* 操作エリアのタイトル */
.accordion-drawer-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作エリアの説明文 */
.accordion-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

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

/* ドロワーメニュー表示中の背景 */
.accordion-drawer-menu_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9998; /* ドロワーメニューより背面へ表示 */
  background:rgba(15,23,42,.6); /* 背景色。.6を大きくすると暗くなる */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では操作できないようにする */
  transition:
    opacity .3s,
    visibility .3s; /* 0.3秒で背景を表示・非表示にする */
}

/* 背景の表示状態 */
.accordion-drawer-menu_overlay.is-active{
  opacity:1; /* 背景を表示 */
  visibility:visible; /* 背景を操作可能にする */
}

/* ドロワーメニュー本体 */
.accordion-drawer-menu_drawer{
  position:fixed; /* 画面左側へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* 背景より前面へ表示 */
  width:380px; /* ドロワーメニューの横幅 */
  max-width:92%; /* 画面幅の92%を超えないようにする */
  height:100vh; /* 画面の高さいっぱいへ広げる */
  padding:28px 24px; /* 上下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; /* 内容が長い場合は縦スクロール可能にする */
}

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

/* ドロワーメニュー上部 */
.accordion-drawer-menu_header{
  display:flex; /* タイトルと閉じるボタンを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* 左右へ分けて配置 */
  gap:16px; /* タイトルと閉じるボタンの間隔 */
  margin-bottom:12px; /* 下側12pxの余白 */
}

/* ドロワーメニューのタイトル */
.accordion-drawer-menu_heading{
  margin:0; /* 外側余白をなくす */
  color:#111827; /* タイトルの文字色 */
  font-size:26px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* ドロワーメニューを閉じるボタン */
.accordion-drawer-menu_close{
  position:relative; /* ×印を配置する基準 */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:42px; /* ボタンの横幅 */
  height:42px; /* ボタンの高さ */
  padding:0; /* ボタン内側の余白をなくす */
  border:1px solid #cbd5e1; /* ボタンの枠線 */
  border-radius:10px; /* ボタンの角丸 */
  background:#f8fafc; /* ボタンの背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 閉じるボタンの2本の線 */
.accordion-drawer-menu_close::before,
.accordion-drawer-menu_close::after{
  content:""; /* 擬似要素を表示 */
  position:absolute; /* ボタン中央へ配置 */
  top:50%; /* 上端から50%の位置 */
  left:50%; /* 左端から50%の位置 */
  width:20px; /* 線の長さ */
  height:2px; /* 線の太さ */
  border-radius:2px; /* 線の角を丸くする */
  background:#111827; /* ×印の色 */
}

/* ×印の1本目 */
.accordion-drawer-menu_close::before{
  transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}

/* ×印の2本目 */
.accordion-drawer-menu_close::after{
  transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}

/* アコーディオンの説明文 */
.accordion-drawer-menu_drawer-text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#64748b; /* 説明文の文字色 */
  font-size:15px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* アコーディオン付きナビゲーション */
.accordion-drawer-menu_nav{
  display:flex; /* アコーディオンを並べる */
  flex-direction:column; /* アコーディオンを縦並びにする */
  gap:12px; /* アコーディオン同士の間隔 */
}

/* アコーディオン全体 */
.accordion-drawer-menu_group{
  border:1px solid #e2e8f0; /* アコーディオンの枠線 */
  border-radius:12px; /* アコーディオンの角丸 */
  background:#ffffff; /* アコーディオンの背景色 */
  overflow:hidden; /* 角丸の外側を非表示 */
}

/* 親メニュー */
.accordion-drawer-menu_parent{
  display:flex; /* 文字と記号を横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* 文字と記号を左右へ配置 */
  gap:16px; /* 文字と記号の間隔 */
  width:100%; /* 横幅いっぱいへ広げる */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
  border:none; /* ボタンの枠線を非表示 */
  background:#ffffff; /* 親メニューの背景色 */
  color:#111827; /* 親メニューの文字色 */
  font-size:17px; /* 親メニューの文字サイズ */
  font-weight:700; /* 親メニューを太字にする */
  line-height:1.5; /* 親メニューの行間 */
  text-align:left; /* 文字を左揃え */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 親メニュー右側の＋記号 */
.accordion-drawer-menu_parent::after{
  content:"＋"; /* 閉じた状態で＋を表示 */
  flex-shrink:0; /* 記号が縮まないようにする */
  color:#2563eb; /* 記号の色 */
  font-size:22px; /* 記号の文字サイズ */
  font-weight:700; /* 記号を太字にする */
}

/* 開いている親メニュー */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_parent{
  background:#eff6ff; /* 開いている親メニューの背景色 */
  color:#1d4ed8; /* 開いている親メニューの文字色 */
}

/* 開いている親メニューの－記号 */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_parent::after{
  content:"－"; /* 開いている状態で－を表示 */
}

/* 子メニューの開閉領域 */
.accordion-drawer-menu_child{
  display:grid; /* 高さをアニメーションさせるためグリッドを使用 */
  grid-template-rows:0fr; /* 初期状態では高さを0にする */
  transition:grid-template-rows .3s ease; /* 0.3秒で子メニューを開閉する */
}

/* 開いている子メニュー */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_child{
  grid-template-rows:1fr; /* 子メニューの高さを内容に合わせる */
}

/* 子メニューの内側 */
.accordion-drawer-menu_child-inner{
  display:flex; /* 子メニューを並べる */
  flex-direction:column; /* 子メニューを縦並びにする */
  gap:10px; /* 子メニュー同士の間隔 */
  min-height:0; /* 閉じた状態で高さを0にできるようにする */
  padding:0 14px; /* 初期状態の左右余白 */
  overflow:hidden; /* 閉じた内容を非表示 */
  transition:padding .3s ease; /* 0.3秒で余白を切り替える */
}

/* 開いている子メニューの内側 */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_child-inner{
  padding:0 14px 14px; /* 開いた状態で下側余白を追加 */
}

/* 子メニューのリンク */
.accordion-drawer-menu_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border-radius:10px; /* リンクの角丸 */
  background:#f1f5f9; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  font-size:15px; /* リンクの文字サイズ */
  font-weight:700; /* リンク文字を太字にする */
  line-height:1.5; /* リンク文字の行間 */
  text-align:left; /* リンク文字を左揃え */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 子メニューのリンクへマウスを重ねた状態 */
.accordion-drawer-menu_link:hover{
  background:#dbeafe; /* マウスを重ねた時の背景色 */
  color:#1d4ed8; /* マウスを重ねた時の文字色 */
}

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

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

  /* スマートフォン用の操作エリア */
  .accordion-drawer-menu_wrap{
    margin:24px auto; /* 上下24pxの余白へ変更 */
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

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

}

// ドロワーメニューを開くボタンを取得
const accordionDrawerMenuOpen=document.querySelector(
  "[data-accordion-drawer-menu-open]"
);

// ドロワーメニューを閉じるボタンを取得
const accordionDrawerMenuClose=document.querySelector(
  "[data-accordion-drawer-menu-close]"
);

// ドロワーメニュー表示中の背景を取得
const accordionDrawerMenuOverlay=document.querySelector(
  "[data-accordion-drawer-menu-overlay]"
);

// ドロワーメニュー本体を取得
const accordionDrawerMenuDrawer=document.querySelector(
  "[data-accordion-drawer-menu-drawer]"
);

// 親メニューをすべて取得
const accordionDrawerMenuParents=document.querySelectorAll(
  ".accordion-drawer-menu_parent"
);

// 子メニューのリンクをすべて取得
const accordionDrawerMenuLinks=document.querySelectorAll(
  "[data-accordion-drawer-menu-link]"
);

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

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

  // ドロワーメニューを表示
  accordionDrawerMenuDrawer.classList.add("is-active");

  // 表示状態へ変更
  accordionDrawerMenuDrawer.setAttribute("aria-hidden","false");

}

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

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

  // ドロワーメニューを非表示
  accordionDrawerMenuDrawer.classList.remove("is-active");

  // 非表示状態へ変更
  accordionDrawerMenuDrawer.setAttribute("aria-hidden","true");

}

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

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

});

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

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

});

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

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

});

// 親メニューごとにクリック処理を設定
accordionDrawerMenuParents.forEach(function(parent){

  // 親メニューをクリックした時
  parent.addEventListener("click",function(){

    // アコーディオン全体を取得
    const accordionGroup=parent.closest(
      ".accordion-drawer-menu_group"
    );

    // 開閉状態を切り替える
    const isOpen=accordionGroup.classList.toggle("is-open");

    // 開閉状態を設定
    parent.setAttribute(
      "aria-expanded",
      String(isOpen)
    );

  });

});

// 子メニューをクリックした時
accordionDrawerMenuLinks.forEach(function(link){

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

    // サンプルのページ移動を止める
    event.preventDefault();

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

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、「メニューを開く」をクリックすると画面左側からアコーディオン付きドロワーメニューが表示されます。ドロワーメニュー内には「サービス」と「お知らせ」の親メニューがあり、それぞれをクリックすると対応する子メニューを開閉できます。

HTMLではドロワーメニューとアコーディオンの構造を作成し、CSSではドロワーメニューのスライド表示、半透明背景、アコーディオンの開閉アニメーションなどを設定しています。JavaScriptではドロワーメニューの表示・非表示と、各親メニューのアコーディオン開閉を制御します。

ドロワーメニューは「メニューを開く」ボタンで表示でき、右上の×ボタンまたは半透明の背景をクリックすると閉じます。サンプルでは子メニューのリンクをクリックした場合もドロワーメニューが閉じます。子メニューのリンクは動作確認用のためページ移動を停止しており、実際のサイトで使用する場合はリンク先とJavaScriptの処理を用途に合わせて変更してください。

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

各ファイルの役割
index.html
「メニューを開く」ボタン、半透明背景、ドロワーメニュー、×ボタン、アコーディオンの親メニューと子メニューを配置しています。サンプルでは「サービス」と「お知らせ」の2つの親メニューを用意し、それぞれに3つの子メニューを配置しています。

style.css
操作エリア、半透明背景、ドロワーメニュー、×ボタン、親メニュー、子メニューなどのデザインを設定しています。ドロワーメニューは通常時に画面左側へ隠し、is-activeクラスが追加されると画面内へスライドします。アコーディオンはis-openクラスによって子メニューの高さを切り替えています。

script.js
ドロワーメニューとアコーディオンの動作を制御しています。「メニューを開く」のクリックでドロワーメニューを表示し、×ボタンまたは半透明背景のクリックで閉じます。親メニューをクリックすると対応するアコーディオンへis-openクラスを追加・削除し、aria-expandedも開閉状態に合わせて変更します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルは同じ階層へ保存します。準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込むため、追加のJavaScriptライブラリは必要ありません。

「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。「サービス」または「お知らせ」をクリックすると、その下に子メニューが展開され、もう一度クリックすると閉じます。右上の×ボタンまたはドロワーメニュー外側の半透明背景をクリックすると、ドロワーメニュー全体が閉じます。

サンプルの子メニューにはhref="#web-production"などのリンク先を設定していますが、JavaScriptのevent.preventDefault();によってページ移動を停止しています。実際にリンクとして使用する場合は、各hrefを移動先へ変更し、子メニューのクリック処理からevent.preventDefault();を削除してください。

カスタマイズできる内容
index.htmlではドロワーメニューのタイトル、説明文、親メニュー、子メニュー、リンク先などを変更できます。アコーディオンを追加する場合は、accordion-drawer-menu_groupを1つのまとまりとして追加し、その中へ親メニューと子メニューを配置します。

style.cssではドロワーメニューの横幅や余白、半透明背景の濃さ、スライド速度、アコーディオンの枠線や背景色、親メニューと子メニューの文字サイズ、開閉速度などを変更できます。親メニュー右側の「＋」「－」もCSSのcontentで変更できます。

script.jsではドロワーメニューを開く・閉じる処理と、アコーディオンの開閉処理を変更できます。このサンプルでは複数のアコーディオンを同時に開ける構成になっているため、「サービス」を開いた状態で「お知らせ」を開くこともできます。

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

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

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

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

background:rgba(15,23,42,.6);
ドロワーメニュー表示中の半透明背景です。.6を大きくすると背景が濃くなり、小さくすると薄くなります。

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

max-width:92%;
ドロワーメニューが画面幅に対して占める最大幅です。狭い画面でドロワーメニューが画面内へ収まるようにしています。

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

transform:translateX(calc(-100% - 40px));
閉じている状態のドロワーメニューを画面左側へ隠す位置です。40pxを大きくすると、さらに左側へ移動します。

transition:transform .35s ease;
ドロワーメニューを開閉する時間です。.35sを大きくするとゆっくり、小さくすると速くスライドします。

width:42px; height:42px;
右上にある×ボタンの横幅と高さです。値を大きくするとボタン全体が大きくなります。

width:20px; height:2px;
×印を作っている2本の線の長さと太さです。20pxで線の長さ、2pxで線の太さを調整できます。

gap:12px;
「サービス」と「お知らせ」など、アコーディオン同士の間隔です。値を大きくすると各アコーディオンの間隔が広がります。

padding:16px 18px;
親メニューの内側余白です。上下の16pxで親メニューの高さ、左右の18pxで文字と端との間隔を調整できます。

transition:grid-template-rows .3s ease;
子メニューを開閉する時間です。.3sを大きくするとゆっくり、小さくすると速く開閉します。

gap:10px;
子メニュー同士の間隔です。値を大きくすると「Web制作」「システム開発」などのリンク同士の間隔が広がります。

padding:12px 14px;
子メニューリンクの内側余白です。上下の12pxでリンクの高さ、左右の14pxで文字と端との間隔を調整できます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。操作エリアにはwidth:100%とmax-width:700px、ドロワーメニューにはwidth:380pxとmax-width:92%を設定しているため、画面幅が狭くなるとドロワーメニューも画面内へ収まるように縮小されます。

画面幅640px以下では、ページ全体の余白を24px 16px、操作エリアをpadding:24px 18px、ドロワーメニューをpadding:24px 18pxへ変更しています。スマートフォン・タブレット・PCの画面幅に合わせてアコーディオン付きドロワーメニューを利用できます。