ダークモード対応ドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

ダークモード対応ドロワーメニューを作る方法

ダークモード対応ドロワーメニューを作る方法を紹介します。このサンプルでは、黒や濃いグレーを基調とした配色のドロワーメニューを、HTML・CSS・JavaScriptで実装します。「メニューを開く」ボタンをクリックすると画面左側からメニューが表示され、閉じるボタンをクリックすると非表示になります。

ダークカラーで統一されたデザインのため、管理画面、会員サイト、動画サイト、ゲーム関連サイトなど、落ち着いた配色を使用するWebページへ導入しやすい構成です。テーマ切り替え機能は使用せず、ページを開いた時点からダークモードのデザインで表示されます。

メニューのタイトル、リンク項目、背景色、文字色、ボタン色、ドロワーメニューの横幅、余白、角丸、影、表示アニメーションの速度を変更できます。画面幅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="dark-mode-drawer-menu_wrap">

    <!-- 案内エリアのタイトル -->
    <h1 class="dark-mode-drawer-menu_title">
      ダークモード対応ドロワーメニュー
    </h1>

    <!-- ドロワーメニューの説明文 -->
    <p class="dark-mode-drawer-menu_text">
      ボタンをクリックすると、ダークカラーのドロワーメニューが表示されます。
    </p>

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

  </main>

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

    <!-- ドロワーメニュー本体 -->
    <aside
      class="dark-mode-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="dark-mode-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <h2
        class="dark-mode-drawer-menu_drawer-title"
        id="dark-mode-drawer-menu-title">
        メニュー
      </h2>

      <!-- ドロワーメニューの説明文 -->
      <p class="dark-mode-drawer-menu_drawer-text">
        ダークカラーで表示されるドロワーメニューです。
      </p>

      <!-- メニューリンク一覧 -->
      <nav
        class="dark-mode-drawer-menu_nav"
        aria-label="メニュー">

        <!-- href属性をホームページのURLへ変更する -->
        <a href="#">ホーム</a>

        <!-- href属性をサービスページのURLへ変更する -->
        <a href="#">サービス</a>

        <!-- href属性をお知らせページのURLへ変更する -->
        <a href="#">お知らせ</a>

        <!-- href属性をお問い合わせページのURLへ変更する -->
        <a href="#">お問い合わせ</a>

      </nav>

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

    </aside>

  </div>

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

</body>

</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで案内エリアとドロワーメニューを配置し、CSSでダークカラーの配色や表示アニメーションを設定、JavaScriptでメニューの開閉を制御します。

「メニューを開く」をクリックすると、画面左側からダークモードデザインのドロワーメニューが表示されます。「閉じる」ボタンまたはメニュー外側の背景部分をクリックすると非表示になります。

テーマ切り替え機能は使用せず、ページ全体とドロワーメニューを最初からダークカラーで表示します。メニュー項目、リンク先、配色、横幅、余白、影、アニメーション時間などをコード内で変更できます。 

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

各ファイルの役割
index.html
案内エリア、開くボタン、ドロワーメニュー、説明文、メニューリンク、閉じるボタンを配置しています。メニュー名や移動先を変更する場合は、各a要素の表示文字とhref属性を編集します。

style.css
ページ全体、案内エリア、背景オーバーレイ、ドロワーメニュー、リンク、ボタン、表示アニメーション、レスポンシブ表示を設定しています。背景色、文字色、横幅、余白、角丸、影などを変更できます。

script.js
開くボタンによる表示、閉じるボタンによる非表示、背景クリックによる非表示、aria-hidden属性の切り替えを行います。

設置方法・使い方
sampleフォルダ内へ3ファイルを同じ階層で配置し、sample/index.htmlをブラウザで開きます。「メニューを開く」をクリックすると表示され、「閉じる」ボタンまたは背景部分をクリックすると閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー項目、リンク先URLを変更できます。style.cssではページ背景色、案内エリアとドロワーメニューの配色、文字色、ボタン色、横幅、余白、枠線、角丸、影、背景の暗さ、表示速度を変更できます。script.jsでは開閉時の処理を編集できます。

数値調整
style.cssのwidth:360px;はドロワーメニューの横幅、padding:28px;は内側余白です。background:rgba(0,0,0,.65);の.65を大きくすると背景が暗くなり、小さくすると薄くなります。animation:dark-mode-drawer-menu-slide .35s ease forwards;の.35sを大きくするとゆっくり表示され、小さくすると速く表示されます。

レスポンシブ対応
style.cssではwidth:100%、max-width:90%、overflow-y:auto、@media screen and (max-width:640px)を使用しています。画面幅640px以下では開くボタンとドロワーメニューを横幅いっぱいに表示するため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント