タブ切り替え機能付きドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

タブ切り替え機能付きドロワーメニューを作る方法

タブ切り替え機能付きドロワーメニューを作る方法を紹介します。このサンプルでは、ドロワーメニュー内へタブ切り替え機能を実装し、「メニュー」「SNS」「設定」などのタブをクリックすると表示内容だけを切り替えられます。HTML・CSS・JavaScriptだけで実装でき、ページ遷移せずに複数の情報を整理して表示できます。

通常のドロワーメニューより多くの情報を見やすく整理できるため、企業サイト、管理画面、会員サイト、ECサイトなどでカテゴリごとにメニューを分けたい場合に便利です。ドロワーメニューを閉じることなく必要な情報へ切り替えられるため、操作性も向上します。

タブ名、表示内容、メニュー項目、リンク先URL、配色、横幅、余白、角丸、影、アニメーション速度などを自由に変更できます。画面幅640px以下ではスマートフォン向けレイアウトへ切り替わるため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

タブ切り替え機能付きドロワーメニュー

タブを切り替えると、ドロワーメニュー内の表示内容だけが切り替わります。

「メニューを開く」をクリックするとドロワーメニューが表示されます。タブをクリックすると表示内容が切り替わり、「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューを閉じます。

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

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

<head>

  <!-- 文字コードをUTF-8に設定する -->
  <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="tab-drawer-menu_wrap">

    <!-- 案内エリアのタイトル -->
    <h1 class="tab-drawer-menu_title">
      タブ切り替え機能付きドロワーメニュー
    </h1>

    <!-- ドロワーメニューの説明文 -->
    <p class="tab-drawer-menu_text">
      タブを切り替えると、ドロワーメニュー内の表示内容だけが切り替わります。
    </p>

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

  </main>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="tab-drawer-menu_overlay"
    data-tab-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <aside
      class="tab-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-label="タブ切り替え機能付きドロワーメニュー">

      <!-- タブボタンを並べるエリア -->
      <div
        class="basic-tab-switch_tabs"
        role="tablist"
        aria-label="ドロワーメニューの表示切り替え">

        <!-- 初期表示するメニュータブ -->
        <button
          class="basic-tab-switch_tab is-active"
          id="tab-menu"
          type="button"
          role="tab"
          aria-selected="true"
          aria-controls="panel-menu"
          data-tab="menu">
          メニュー
        </button>

        <!-- SNSタブ -->
        <button
          class="basic-tab-switch_tab"
          id="tab-sns"
          type="button"
          role="tab"
          aria-selected="false"
          aria-controls="panel-sns"
          data-tab="sns">
          SNS
        </button>

        <!-- 設定タブ -->
        <button
          class="basic-tab-switch_tab"
          id="tab-setting"
          type="button"
          role="tab"
          aria-selected="false"
          aria-controls="panel-setting"
          data-tab="setting">
          設定
        </button>

      </div>

      <!-- メニュータブに対応する表示内容 -->
      <div
        class="basic-tab-switch_panel is-active"
        id="panel-menu"
        role="tabpanel"
        aria-labelledby="tab-menu"
        data-panel="menu">

        <!--
          href属性の#をホームページのURLへ変更する
          「ホーム」を表示したいメニュー名へ変更できる
        -->
        <a href="#">ホーム</a>

        <!--
          href属性の#をサービスページのURLへ変更する
          「サービス」を表示したいメニュー名へ変更できる
        -->
        <a href="#">サービス</a>

        <!--
          href属性の#をお問い合わせページのURLへ変更する
          「お問い合わせ」を表示したいメニュー名へ変更できる
        -->
        <a href="#">お問い合わせ</a>

      </div>

      <!-- SNSタブに対応する表示内容 -->
      <div
        class="basic-tab-switch_panel"
        id="panel-sns"
        role="tabpanel"
        aria-labelledby="tab-sns"
        data-panel="sns">

        <!--
          href属性の#をXのURLへ変更する
          「X」を表示したいリンク名へ変更できる
        -->
        <a href="#">X</a>

        <!--
          href属性の#をInstagramのURLへ変更する
          「Instagram」を表示したいリンク名へ変更できる
        -->
        <a href="#">Instagram</a>

        <!--
          href属性の#をYouTubeのURLへ変更する
          「YouTube」を表示したいリンク名へ変更できる
        -->
        <a href="#">YouTube</a>

      </div>

      <!-- 設定タブに対応する表示内容 -->
      <div
        class="basic-tab-switch_panel"
        id="panel-setting"
        role="tabpanel"
        aria-labelledby="tab-setting"
        data-panel="setting">

        <!--
          href属性の#をプロフィールページのURLへ変更する
          「プロフィール」を表示したいメニュー名へ変更できる
        -->
        <a href="#">プロフィール</a>

        <!--
          href属性の#を通知設定ページのURLへ変更する
          「通知設定」を表示したいメニュー名へ変更できる
        -->
        <a href="#">通知設定</a>

        <!--
          href属性の#をログアウト先のURLへ変更する
          「ログアウト」を表示したいメニュー名へ変更できる
        -->
        <a href="#">ログアウト</a>

      </div>

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

    </aside>

  </div>

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

</body>

</html>

/* =========================================
   共通設定
========================================= */

/* すべての要素と疑似要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}

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

/* ページ内のボタン */
button{
  font:inherit; /* 親要素と同じフォントを使用する */
}

/* =========================================
   案内エリア
========================================= */

/* ページの案内エリア */
.tab-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; /* タイトル・説明文・ボタンを中央揃えにする */
}

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

/* 案内エリアの説明文 */
.tab-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* =========================================
   開くボタン
========================================= */

/* ドロワーメニューを開くボタン */
.tab-drawer-menu_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除する */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#0b6bff; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更する */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}

/* 開くボタンへマウスを重ねた状態 */
.tab-drawer-menu_open:hover{
  background:#0959d9; /* ホバー時の背景色 */
}

/* =========================================
   背景オーバーレイ
========================================= */

/* ドロワーメニュー表示時の背景 */
.tab-drawer-menu_overlay{
  display:none; /* 初期状態では非表示にする */
  position:fixed; /* ブラウザ画面へ固定する */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示する */
  align-items:stretch; /* ドロワーメニューを画面の高さへ伸ばす */
  justify-content:flex-start; /* ドロワーメニューを画面左側へ配置する */
  background:rgba(0,0,0,.45); /* 半透明の背景色。.45を大きくすると暗くなる */
}

/* ドロワーメニューの表示状態 */
.tab-drawer-menu_overlay.is-active{
  display:flex; /* 表示用クラスが付いたときに表示する */
}

/* =========================================
   ドロワーメニュー本体
========================================= */

/* ドロワーメニュー本体 */
.tab-drawer-menu_drawer{
  width:360px; /* ドロワーメニューの横幅。値を大きくすると広がる */
  max-width:90%; /* 小さい画面で画面幅を超えない最大横幅 */
  height:100%; /* ブラウザ画面と同じ高さにする */
  padding:24px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示する */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:10px 0 30px rgba(0,0,0,.18); /* ドロワーメニュー右側の影 */
  animation:tab-drawer-menu-slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくすると遅くなる */
}

/* =========================================
   タブボタン
========================================= */

/* タブボタンを並べるエリア */
.basic-tab-switch_tabs{
  display:flex; /* タブボタンを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ下側の区切り線 */
}

/* 各タブボタン */
.basic-tab-switch_tab{
  flex:1; /* 3つのタブを同じ横幅にする */
  min-width:0; /* 狭い画面で横幅がはみ出さないようにする */
  min-height:48px; /* タップしやすい最小高さ */
  padding:14px 8px; /* 上下14px・左右8pxの内側余白 */
  border:1px solid #d1d5db; /* タブボタンの枠線 */
  border-bottom:none; /* 下側の枠線を削除する */
  border-radius:12px 12px 0 0; /* 上側だけ角丸にする */
  background:#ffffff; /* タブボタンの背景色 */
  color:#111827; /* タブボタンの文字色 */
  font-size:14px; /* タブボタンの文字サイズ */
  font-weight:700; /* タブ文字を太字にする */
  line-height:1.5; /* タブ文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更する */
  transition:background .2s ease,color .2s ease; /* 0.2秒で背景色と文字色を変化させる */
}

/* 2つ目以降のタブボタン */
.basic-tab-switch_tab + .basic-tab-switch_tab{
  margin-left:6px; /* タブボタン同士の間隔 */
}

/* 選択中のタブボタン */
.basic-tab-switch_tab.is-active{
  background:#0b6bff; /* 選択中タブの背景色 */
  color:#ffffff; /* 選択中タブの文字色 */
  border-color:#0b6bff; /* 選択中タブの枠線色 */
}

/* タブボタンへマウスを重ねた状態 */
.basic-tab-switch_tab:not(.is-active):hover{
  background:#f1f5f9; /* 未選択タブのホバー時背景色 */
}

/* =========================================
   タブパネル
========================================= */

/* 各タブの表示内容 */
.basic-tab-switch_panel{
  display:none; /* 初期状態では非表示にする */
  padding:18px; /* パネル内側の余白 */
  border:1px solid #d1d5db; /* パネルの枠線 */
  border-top:none; /* タブとの境界にある上側の枠線を削除する */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中のタブパネル */
.basic-tab-switch_panel.is-active{
  display:block; /* 選択中のパネルだけ表示する */
}

/* タブパネル内のリンク */
.basic-tab-switch_panel a{
  display:block; /* リンク全体をクリックできるようにする */
  min-height:44px; /* タップしやすい最小高さ */
  padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  border-radius:8px; /* リンクの角丸 */
  color:#111827; /* リンクの文字色 */
  font-size:16px; /* リンクの文字サイズ */
  font-weight:600; /* リンク文字の太さ */
  line-height:1.5; /* リンク文字の行間 */
  text-align:left; /* リンク文字を左揃えにする */
  text-decoration:none; /* リンクの下線を削除する */
  transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}

/* タブパネル内のリンクへマウスを重ねた状態 */
.basic-tab-switch_panel a:hover{
  background:#f3f4f6; /* ホバー時の背景色 */
}

/* =========================================
   閉じるボタン
========================================= */

/* ドロワーメニューを閉じるボタン */
.tab-drawer-menu_close{
  width:100%; /* ドロワーメニューの横幅いっぱいに表示する */
  min-height:48px; /* タップしやすい最小高さ */
  margin:24px 0 0; /* 上側24pxの余白 */
  padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除する */
  border-radius:8px; /* ボタンの角丸 */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更する */
  transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}

/* 閉じるボタンへマウスを重ねた状態 */
.tab-drawer-menu_close:hover{
  background:#374151; /* ホバー時の背景色 */
}

/* =========================================
   表示アニメーション
========================================= */

@keyframes tab-drawer-menu-slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始する */
    transform:translateX(-100%); /* 画面左側の外から開始する */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示する */
    transform:translateX(0); /* 元の位置へ移動する */
  }

}

/* =========================================
   スマートフォン対応
========================================= */

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

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

  /* スマートフォン用の案内エリア */
  .tab-drawer-menu_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小する */
    padding:24px 18px; /* 内側余白を縮小する */
  }

  /* スマートフォン用の開くボタン */
  .tab-drawer-menu_open{
    width:100%; /* ボタンを案内エリアの横幅いっぱいに表示する */
  }

  /* スマートフォン用のドロワーメニュー */
  .tab-drawer-menu_drawer{
    width:100%; /* ドロワーメニューを画面幅いっぱいに表示する */
    max-width:100%; /* 最大横幅を画面幅に合わせる */
    padding:24px 20px; /* 内側余白を調整する */
  }

  /* スマートフォン用のタブボタン */
  .basic-tab-switch_tab{
    padding:12px 4px; /* 狭い画面用に左右余白を縮小する */
    font-size:13px; /* 狭い画面用に文字サイズを小さくする */
  }

}

// =========================================
// ドロワーメニューで使用する要素を取得
// =========================================

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

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

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

// タブボタンをすべて取得
const basicTabSwitchTabs=document.querySelectorAll(
  ".basic-tab-switch_tab"
);

// タブパネルをすべて取得
const basicTabSwitchPanels=document.querySelectorAll(
  ".basic-tab-switch_panel"
);

// =========================================
// ドロワーメニューを開く処理
// =========================================

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

  // 背景オーバーレイへ表示用クラスを追加
  tabDrawerMenuOverlay.classList.add("is-active");

  // ドロワーメニューが表示中であることを支援技術へ伝える
  tabDrawerMenuOverlay.setAttribute(
    "aria-hidden",
    "false"
  );

});

// =========================================
// ドロワーメニューを閉じる共通処理
// =========================================

// ドロワーメニューを閉じる関数
function closeTabDrawerMenu(){

  // 背景オーバーレイから表示用クラスを削除
  tabDrawerMenuOverlay.classList.remove("is-active");

  // ドロワーメニューが非表示であることを支援技術へ伝える
  tabDrawerMenuOverlay.setAttribute(
    "aria-hidden",
    "true"
  );

}

// =========================================
// 閉じるボタンで閉じる処理
// =========================================

// 閉じるボタンをクリックしたとき
tabDrawerMenuClose.addEventListener(
  "click",
  closeTabDrawerMenu
);

// =========================================
// 背景クリックで閉じる処理
// =========================================

// 背景オーバーレイをクリックしたとき
tabDrawerMenuOverlay.addEventListener(
  "click",
  function(event){

    // クリックされた要素が背景オーバーレイ自身の場合だけ閉じる
    if(event.target===tabDrawerMenuOverlay){

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

    }

  }
);

// =========================================
// タブを切り替える処理
// =========================================

// 各タブボタンへクリック処理を設定
basicTabSwitchTabs.forEach(function(tab){

  // タブボタンをクリックしたとき
  tab.addEventListener("click",function(){

    // クリックされたタブに対応する名前を取得
    const target=tab.dataset.tab;

    // すべてのタブボタンを未選択状態へ変更
    basicTabSwitchTabs.forEach(function(item){

      // 選択中クラスを削除
      item.classList.remove("is-active");

      // 支援技術へ未選択状態を伝える
      item.setAttribute(
        "aria-selected",
        "false"
      );

    });

    // すべてのタブパネルを非表示状態へ変更
    basicTabSwitchPanels.forEach(function(panel){

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

    });

    // クリックされたタブを選択状態へ変更
    tab.classList.add("is-active");

    // 支援技術へ選択状態を伝える
    tab.setAttribute(
      "aria-selected",
      "true"
    );

    // 対応するタブパネルを取得
    const targetPanel=document.querySelector(
      '[data-panel="'+target+'"]'
    );

    // 対応するタブパネルを表示
    targetPanel.classList.add("is-active");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニュー本体と「メニュー」「SNS」「設定」の3つのタブ、各タブに対応するリンクを作成し、CSSでドロワーメニュー・背景オーバーレイ・タブ・ボタンなどのデザインを設定します。JavaScriptではドロワーメニューの開閉と、クリックしたタブに対応する内容の切り替えを行います。

外部ライブラリや外部サービスは使用していません。メニュー内のリンク先はサンプル用としてhref="#"を設定しているため、実際に使用するときはホーム、サービス、お問い合わせ、X、Instagram、YouTube、プロフィール、通知設定、ログアウトなど、それぞれのリンク先URLへ変更してください。

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

各ファイルの役割
index.htmlは、ページの案内エリア、ドロワーメニューを開くボタン、背景オーバーレイ、ドロワーメニュー本体、タブ、各タブの表示内容、閉じるボタンを構成するファイルです。「メニュー」「SNS」「設定」のタブ名や、それぞれに表示するリンク名を変更できます。また、各リンクのhref="#"を実際に移動させたいページのURLへ変更します。

style.cssは、案内エリアや開閉ボタン、背景オーバーレイ、ドロワーメニュー、タブ、リンクなどの見た目を設定するファイルです。ドロワーメニューの横幅、背景色、余白、角丸、影、タブの色などを変更できます。@keyframes tab-drawer-menu-slideでは、ドロワーメニューが画面左側から表示されるアニメーションを設定しています。

script.jsは、ドロワーメニューとタブ切り替えの動作を設定するファイルです。「メニューを開く」をクリックすると背景オーバーレイへis-activeを追加してドロワーメニューを表示します。「閉じる」をクリックするか、ドロワーメニューの外側にある背景部分をクリックすると非表示になります。タブをクリックした場合は、選択中のタブと対応するパネルへis-activeを付け替えて表示内容を切り替えます。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルを配置したあとsample/index.htmlをブラウザで開くと動作を確認できます。

ページに表示された「メニューを開く」ボタンをクリックすると、画面全体に半透明の背景が表示され、その左側からドロワーメニューが表示されます。初期状態では「メニュー」タブが選択されています。「SNS」または「設定」をクリックすると、ドロワーメニューを閉じることなく内部の表示内容だけが切り替わります。

実際のサイトで使用するときは、index.htmlにある各<a href="#">の#を移動先のURLへ変更してください。たとえば「お問い合わせ」には実際のお問い合わせページ、「X」「Instagram」「YouTube」には利用する各ページのURLを設定します。このサンプルではURL取得のための外部サービスやAPIは使用していないため、APIキーやアクセストークンなどの設定は必要ありません。

カスタマイズできる内容
index.htmlでは、案内エリアのタイトルと説明文、「メニューを開く」「閉じる」のボタン文字、3つのタブ名、各タブ内に表示するリンク名とリンク先URLを変更できます。リンクを追加したい場合は、対応する.basic-tab-switch_panel内へ同じ形式の<a>要素を追加します。

style.cssでは、案内エリアやドロワーメニューの横幅、余白、背景色、文字色、枠線、角丸、影などを変更できます。.tab-drawer-menu_openでは開くボタン、.tab-drawer-menu_drawerではドロワーメニュー本体、.basic-tab-switch_tabではタブのデザインを調整できます。選択中のタブは.basic-tab-switch_tab.is-active、メニュー内のリンクは.basic-tab-switch_panel aでデザインを変更できます。

数値調整
style.css

max-width:700px;
ページ上部に表示する案内エリアの最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。

padding:32px;
案内エリアの内側余白です。値を大きくするとタイトルや説明文と外枠との間隔が広がります。

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

min-height:48px;
「メニューを開く」ボタンやタブ、閉じるボタンなどに設定している最小高さです。値を大きくすると対象となるボタンが高くなります。

background:rgba(0,0,0,.45);
ドロワーメニュー表示時に画面全体へ重ねる背景色です。.45が透明度を表しており、値を1へ近づけるほど背景が濃くなり、0へ近づけるほど透明になります。

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

max-width:90%;
ドロワーメニューが画面幅に対して広がりすぎないようにする最大横幅です。画面が狭くなった場合に、ドロワーメニューが画面内へ収まるようにします。

padding:24px;
ドロワーメニュー本体の内側余白です。値を大きくするとタブやリンクとドロワーメニュー端との間隔が広がります。

animation:tab-drawer-menu-slide .35s ease forwards;
ドロワーメニューを左側から表示するアニメーション時間です。.35sは0.35秒を表します。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

margin-left:6px;
2つ目以降のタブに設定している左側の間隔です。値を大きくするとタブ同士の間隔が広がり、小さくすると狭くなります。

padding:18px;
各タブパネルの内側余白です。値を大きくするとリンクとパネルの枠との間隔が広がります。

margin:24px 0 0;
閉じるボタンの上側に設定している余白です。24pxを大きくするとタブパネルと閉じるボタンの間隔が広がります。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。案内エリアにはwidth:100%とmax-width:700px、ドロワーメニューにはwidth:360pxとmax-width:90%を設定し、画面幅に応じて収まるようにしています。

さらに@media screen and (max-width:640px)を使用し、画面幅640px以下ではページの余白を24px 12px、案内エリアの内側余白を24px 18pxへ変更します。「メニューを開く」ボタンはwidth:100%になり、ドロワーメニューもwidth:100%とmax-width:100%によって画面幅いっぱいに表示されます。タブは左右の余白と文字サイズも小さい画面向けに調整されるため、スマートフォン・タブレット・PCで利用できます。