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

html/css/js
2025.09.29

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

HTMLとCSSだけを使って、複数のドロワーメニューを切り替えて表示する方法を紹介します。このサンプルでは、JavaScriptを使わずに異なるメニューを開き分けることができます。カテゴリーごとのナビゲーションや機能別メニュー、シンプルなUIを実装したい場合などに利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

画面中央のボタンから、上下左右それぞれの方向のドロワーメニューを開けます。

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

<!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>

  <!-- ドロワーの状態を管理するラジオボタン -->
  <input class="html-css-multiple-drawer-menu_radio" type="radio" name="drawer" id="drawer-none" checked>
  <input class="html-css-multiple-drawer-menu_radio" type="radio" name="drawer" id="drawer-top">
  <input class="html-css-multiple-drawer-menu_radio" type="radio" name="drawer" id="drawer-right">
  <input class="html-css-multiple-drawer-menu_radio" type="radio" name="drawer" id="drawer-bottom">
  <input class="html-css-multiple-drawer-menu_radio" type="radio" name="drawer" id="drawer-left">

  <!-- デモ全体を囲むエリア -->
  <div class="html-css-multiple-drawer-menu_wrap">

    <!-- 見出し -->
    <div class="html-css-multiple-drawer-menu_title">
      複数ドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="html-css-multiple-drawer-menu_text">
      上下左右のボタンから対応するドロワーメニューを表示できます。
    </p>

    <!-- 十字配置のボタン -->
    <div class="html-css-multiple-drawer-menu_cross">

      <label class="html-css-multiple-drawer-menu_button html-css-multiple-drawer-menu_button-top" for="drawer-top">
        上
      </label>

      <label class="html-css-multiple-drawer-menu_button html-css-multiple-drawer-menu_button-left" for="drawer-left">
        左
      </label>

      <label class="html-css-multiple-drawer-menu_button html-css-multiple-drawer-menu_button-right" for="drawer-right">
        右
      </label>

      <label class="html-css-multiple-drawer-menu_button html-css-multiple-drawer-menu_button-bottom" for="drawer-bottom">
        下
      </label>

    </div>

  </div>

  <!-- オーバーレイ -->
  <label class="html-css-multiple-drawer-menu_overlay" for="drawer-none"></label>

  <!-- 上ドロワー -->
  <div class="html-css-multiple-drawer-menu_drawer html-css-multiple-drawer-menu_drawer-top">

    <div class="html-css-multiple-drawer-menu_drawer-title">
      上メニュー
    </div>

    <p class="html-css-multiple-drawer-menu_drawer-text">
      画面上から表示されます。
    </p>

    <label class="html-css-multiple-drawer-menu_close" for="drawer-none">
      閉じる
    </label>

  </div>

  <!-- 右ドロワー -->
  <div class="html-css-multiple-drawer-menu_drawer html-css-multiple-drawer-menu_drawer-right">

    <div class="html-css-multiple-drawer-menu_drawer-title">
      右メニュー
    </div>

    <p class="html-css-multiple-drawer-menu_drawer-text">
      画面右から表示されます。
    </p>

    <label class="html-css-multiple-drawer-menu_close" for="drawer-none">
      閉じる
    </label>

  </div>

  <!-- 下ドロワー -->
  <div class="html-css-multiple-drawer-menu_drawer html-css-multiple-drawer-menu_drawer-bottom">

    <div class="html-css-multiple-drawer-menu_drawer-title">
      下メニュー
    </div>

    <p class="html-css-multiple-drawer-menu_drawer-text">
      画面下から表示されます。
    </p>

    <label class="html-css-multiple-drawer-menu_close" for="drawer-none">
      閉じる
    </label>

  </div>

  <!-- 左ドロワー -->
  <div class="html-css-multiple-drawer-menu_drawer html-css-multiple-drawer-menu_drawer-left">

    <div class="html-css-multiple-drawer-menu_drawer-title">
      左メニュー
    </div>

    <p class="html-css-multiple-drawer-menu_drawer-text">
      画面左から表示されます。
    </p>

    <label class="html-css-multiple-drawer-menu_close" for="drawer-none">
      閉じる
    </label>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSをそれぞれ別ファイルに分けて使用します。index.html、style.css を同じフォルダに配置してください。 

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

index.html をブラウザで開くと、JavaScriptを使わずにHTMLとCSSだけで複数のドロワーメニューを切り替えて表示できます。

コメント