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

表示位置・メニュー項目・サイズ・色・余白・閉じ方などを設定して、HTML・CSS・JavaScriptを自動生成できます。

HTML/CSSだけで複数ドロワーメニューを切り替えて表示する方法

HTML/CSSだけで複数ドロワーメニューを切り替えて表示する方法を紹介します。このサンプルでは、ラジオボタンとlabel要素を利用し、JavaScriptを使用せずに1つのドロワーメニュー内の表示内容を切り替えられます。メニューAとメニューBのボタンをクリックすると、それぞれ異なるメニュー内容が表示され、閉じるボタンや背景部分をクリックするとドロワーメニューを閉じることができます。

管理画面や会員サイトでは、利用者の種類や機能ごとに表示するメニューを切り替えたい場面があります。また、ECサイトの商品カテゴリや企業サイトのサービス一覧など、複数のメニューを用途に応じて表示したい場合にも利用できます。1つのドロワーメニューを共通で使用しながら内容だけを切り替えるため、画面をすっきり見せやすく、HTML/CSSのみで実装できる点もメリットです。

タイトル、説明文、ボタン名、メニュー項目、リンク先はHTMLから変更できます。CSSではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、アニメーション速度などを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、JavaScriptを使用せずに複数メニューを切り替えたい場合のサンプルとして活用できます。

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

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

デモ

HTML/CSSだけで切り替える複数ドロワーメニュー

ボタンをクリックすると、1つのドロワーメニュー内で表示内容を切り替えます。

メニューA メニューB

「メニューA」「メニューB」をクリックすると、同じドロワーメニューが左側から表示され、内容だけが切り替わります。閉じるボタンまたは背景部分をクリックすると、ページ移動や再読み込みをせずに閉じます。

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

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

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

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

  <!-- ページタイトル -->
  <title>HTML/CSSだけで複数ドロワーメニューを切り替えて表示</title>

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

</head>
<body>

  <!-- ドロワーメニューを開く操作エリア -->
  <main class="html-css-multi-drawer_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="html-css-multi-drawer_title">
      HTML/CSSだけで切り替える複数ドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="html-css-multi-drawer_text">
      ボタンをクリックすると、1つのドロワーメニュー内で表示内容を切り替えます。
    </p>

    <!-- メニューを開くボタン -->
    <div class="html-css-multi-drawer_buttons">

      <!-- メニューAを開く -->
      <label
        class="html-css-multi-drawer_button"
        for="html-css-multi-drawer-a">
        メニューA
      </label>

      <!-- メニューBを開く -->
      <label
        class="html-css-multi-drawer_button"
        for="html-css-multi-drawer-b">
        メニューB
      </label>

    </div>

  </main>

  <!-- ドロワーメニューを閉じた状態 -->
  <input
    class="html-css-multi-drawer_radio"
    type="radio"
    name="html-css-multi-drawer"
    id="html-css-multi-drawer-close"
    checked>

  <!-- メニューAを表示する状態 -->
  <input
    class="html-css-multi-drawer_radio"
    type="radio"
    name="html-css-multi-drawer"
    id="html-css-multi-drawer-a">

  <!-- メニューBを表示する状態 -->
  <input
    class="html-css-multi-drawer_radio"
    type="radio"
    name="html-css-multi-drawer"
    id="html-css-multi-drawer-b">

  <!-- ドロワーメニュー表示中の背景 -->
  <label
    class="html-css-multi-drawer_overlay"
    for="html-css-multi-drawer-close"
    aria-label="ドロワーメニューを閉じる">
  </label>

  <!-- 1つのドロワーメニュー本体 -->
  <aside class="html-css-multi-drawer_drawer">

    <!-- メニューAの内容 -->
    <div class="html-css-multi-drawer_content html-css-multi-drawer_content-a">

      <!-- メニューA上部 -->
      <div class="html-css-multi-drawer_header">

        <!-- メニューAのタイトル -->
        <div class="html-css-multi-drawer_heading">
          メニューA
        </div>

        <!-- メニューAを閉じるボタン -->
        <label
          class="html-css-multi-drawer_close"
          for="html-css-multi-drawer-close"
          aria-label="メニューAを閉じる">
        </label>

      </div>

      <!-- メニューAのナビゲーション -->
      <nav class="html-css-multi-drawer_nav" aria-label="メニューA">

        <a class="html-css-multi-drawer_link" href="#home">
          ホーム
        </a>

        <a class="html-css-multi-drawer_link" href="#service">
          サービス
        </a>

        <a class="html-css-multi-drawer_link" href="#company">
          会社概要
        </a>

        <a class="html-css-multi-drawer_link" href="#contact">
          お問い合わせ
        </a>

      </nav>

    </div>

    <!-- メニューBの内容 -->
    <div class="html-css-multi-drawer_content html-css-multi-drawer_content-b">

      <!-- メニューB上部 -->
      <div class="html-css-multi-drawer_header">

        <!-- メニューBのタイトル -->
        <div class="html-css-multi-drawer_heading">
          メニューB
        </div>

        <!-- メニューBを閉じるボタン -->
        <label
          class="html-css-multi-drawer_close"
          for="html-css-multi-drawer-close"
          aria-label="メニューBを閉じる">
        </label>

      </div>

      <!-- メニューBのナビゲーション -->
      <nav class="html-css-multi-drawer_nav" aria-label="メニューB">

        <a class="html-css-multi-drawer_link" href="#blog">
          ブログ
        </a>

        <a class="html-css-multi-drawer_link" href="#price">
          料金
        </a>

        <a class="html-css-multi-drawer_link" href="#case">
          導入事例
        </a>

        <a class="html-css-multi-drawer_link" href="#support">
          サポート
        </a>

      </nav>

    </div>

  </aside>

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

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

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

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

/* メニューを開くボタンの配置 */
.html-css-multi-drawer_buttons{
  display:flex; /* ボタンを横並びにする */
  justify-content:center; /* ボタンを中央へ配置 */
  gap:12px; /* ボタン同士の間隔 */
  flex-wrap:wrap; /* 画面幅が狭い場合は折り返す */
}

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

/* 開閉状態を管理するラジオボタン */
.html-css-multi-drawer_radio{
  position:fixed; /* 通常レイアウトから外す */
  width:1px; /* 表示領域を最小にする */
  height:1px; /* 表示領域を最小にする */
  opacity:0; /* ラジオボタンを見えなくする */
  pointer-events:none; /* ラジオボタン自体の操作を無効にする */
}

/* ドロワーメニュー表示中の背景 */
.html-css-multi-drawer_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9998; /* ドロワーメニューより背面へ表示 */
  background:rgba(15,23,42,.55); /* 背景色。.55を大きくすると暗くなる */
  opacity:0; /* 初期状態では透明 */
  visibility:hidden; /* 初期状態では操作できないようにする */
  transition:
    opacity .3s,
    visibility .3s; /* 0.3秒で背景の表示状態を切り替える */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

/* メニューAまたはメニューBが選択された時の背景 */
#html-css-multi-drawer-a:checked
~ .html-css-multi-drawer_overlay,
#html-css-multi-drawer-b:checked
~ .html-css-multi-drawer_overlay{
  opacity:1; /* 背景を表示 */
  visibility:visible; /* 背景を操作可能にする */
}

/* メニューAまたはメニューBが選択された時のドロワーメニュー */
#html-css-multi-drawer-a:checked
~ .html-css-multi-drawer_drawer,
#html-css-multi-drawer-b:checked
~ .html-css-multi-drawer_drawer{
  transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}

/* ドロワーメニュー内の内容 */
.html-css-multi-drawer_content{
  display:none; /* 初期状態では両方の内容を非表示 */
}

/* メニューAが選択された時 */
#html-css-multi-drawer-a:checked
~ .html-css-multi-drawer_drawer
.html-css-multi-drawer_content-a{
  display:block; /* メニューAの内容を表示 */
}

/* メニューBが選択された時 */
#html-css-multi-drawer-b:checked
~ .html-css-multi-drawer_drawer
.html-css-multi-drawer_content-b{
  display:block; /* メニューBの内容を表示 */
}

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

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

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

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

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

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

/* ナビゲーションメニュー */
.html-css-multi-drawer_nav{
  display:flex; /* メニュー項目を並べる */
  flex-direction:column; /* メニュー項目を縦並びにする */
  gap:12px; /* メニュー項目同士の間隔 */
}

/* ナビゲーションリンク */
.html-css-multi-drawer_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
  border-radius:10px; /* リンクの角丸 */
  background:#f1f5f9; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  font-size:17px; /* リンクの文字サイズ */
  font-weight:700; /* リンク文字を太字にする */
  line-height:1.5; /* リンク文字の行間 */
  text-align:left; /* リンク文字を左揃え */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* ナビゲーションリンクへマウスを重ねた状態 */
.html-css-multi-drawer_link:hover{
  background:#dbeafe; /* マウスを重ねた時の背景色 */
  color:#1d4ed8; /* マウスを重ねた時の文字色 */
}

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

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

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

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

}

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンとlabel要素を利用して、ボタンごとに異なる内容を1つのドロワーメニューへ表示します。CSSではドロワーメニューの開閉、表示内容の切り替え、背景オーバーレイの表示、レイアウトやデザインを設定しており、JavaScriptを使用せずに動作します。

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

各ファイルの役割
index.htmlはページ全体の構成を定義するファイルです。タイトル、説明文、メニューA・メニューBのボタン名、各ドロワーメニューの見出し、リンク名、リンク先を変更できます。ラジオボタンを利用して表示するメニュー内容を切り替えます。

style.cssは画面全体のデザインを設定するファイルです。ドロワーメニューの横幅、背景色、余白、文字色、角丸、影、オーバーレイ、アニメーション、レスポンシブ表示などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「メニューA」「メニューB」をクリックすると左側からドロワーメニューが表示され、それぞれ異なる内容へ切り替わります。閉じるボタンまたは背景部分をクリックするとドロワーメニューを閉じられます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、ドロワーメニューの見出し、リンク名、リンク先を自由に変更できます。メニュー項目を追加・削除したり、用途に合わせて表示内容を変更できます。

style.cssではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、ボタンデザイン、リンクデザイン、アニメーション速度、オーバーレイの色や透明度などを変更できます。

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

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

max-width:85%;
小さい画面での最大横幅です。値を変更すると画面に対するドロワーメニューの割合が変わります。

padding:32px;
コンテンツ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

padding:28px 22px;
ドロワーメニュー内側の余白です。値を変更するとメニュー内容の配置が変わります。

border-radius:10px;
ボタンやリンクの角丸です。値を大きくすると丸みが強くなります。

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

transition:opacity .3s, visibility .3s;
背景オーバーレイの表示・非表示時間です。値を大きくすると切り替えがゆっくりになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じてコンテンツが縮小されます。また、ドロワーメニューはmax-width:85%で画面内へ収まり、640px以下では余白を調整するmedia queryを使用しているため、スマートフォン・タブレット・PCで利用できます。