左右両側から表示するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

左右両側から表示するドロワーメニューの作り方

左右両側から表示するドロワーメニューの作り方を紹介します。このサンプルでは、左側と右側にそれぞれ専用のドロワーメニューを用意し、ボタンをクリックすると選択した側からスライド表示できます。HTML・CSS・JavaScriptのみで実装しているため、ライブラリを使用せずシンプルな構成で導入できます。

左右で異なる内容を表示できるため、管理画面のサイドメニュー、お問い合わせ画面の操作パネル、ECサイトの商品情報や絞り込み条件、会員サイトの設定メニューなど、用途ごとに役割を分けたUIを作成したい場合に便利です。背景をクリックするか閉じるボタンを押すだけでメニューを閉じられるため、一般的なドロワーメニューとしてそのまま利用できます。

サンプルコードでは、メニューのタイトルや本文、左右それぞれの表示内容を自由に変更できます。また、ドロワーメニューの幅や背景色、文字色、アニメーション速度などもCSSから簡単に調整できるため、サイトデザインに合わせたカスタマイズも行いやすく、スマートフォン・タブレット・パソコンでも利用しやすい構成になっています。

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

デモ

左右両側から表示するドロワーメニュー

左側・右側のボタンをクリックすると、それぞれ対応するドロワーメニューが表示されます。

「左メニュー」または「右メニュー」をクリックすると、それぞれ画面の左側・右側からドロワーメニューが表示されます。背景または「閉じる」をクリックすると閉じる動作を確認できます。

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

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

  <!-- 案内エリア -->
  <div class="left-right-drawer-menu_wrap">

    <!-- タイトル -->
    <div class="left-right-drawer-menu_title">
      左右両側から表示するドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="left-right-drawer-menu_text">
      左側・右側のボタンをクリックすると、それぞれ対応するドロワーメニューが表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <div class="left-right-drawer-menu_buttons">

      <!-- 左側のドロワーメニューを開く -->
      <button
        type="button"
        data-open="left">
        左メニュー
      </button>

      <!-- 右側のドロワーメニューを開く -->
      <button
        type="button"
        data-open="right">
        右メニュー
      </button>

    </div>

  </div>

  <!-- 背景オーバーレイ -->
  <div
    class="left-right-drawer-menu_overlay"
    data-overlay
    aria-hidden="true">

    <!-- 左側ドロワーメニュー -->
    <div
      class="left-right-drawer-menu_drawer left"
      data-left
      hidden
      role="dialog"
      aria-modal="true"
      aria-labelledby="left-drawer-title">

      <!-- 左側タイトル -->
      <div
        class="left-right-drawer-menu_drawer-title"
        id="left-drawer-title">
        左メニュー
      </div>

      <!-- 左側説明文 -->
      <p class="left-right-drawer-menu_drawer-text">
        左側からスライド表示されるドロワーメニューです。
      </p>

      <!-- 閉じるボタン -->
      <button
        class="left-right-drawer-menu_close"
        type="button"
        data-close>
        閉じる
      </button>

    </div>

    <!-- 右側ドロワーメニュー -->
    <div
      class="left-right-drawer-menu_drawer right"
      data-right
      hidden
      role="dialog"
      aria-modal="true"
      aria-labelledby="right-drawer-title">

      <!-- 右側タイトル -->
      <div
        class="left-right-drawer-menu_drawer-title"
        id="right-drawer-title">
        右メニュー
      </div>

      <!-- 右側説明文 -->
      <p class="left-right-drawer-menu_drawer-text">
        右側からスライド表示されるドロワーメニューです。
      </p>

      <!-- 閉じるボタン -->
      <button
        class="left-right-drawer-menu_close"
        type="button"
        data-close>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。左右それぞれのボタンをクリックすると、対応するドロワーメニューが画面の左右からスライド表示されるシンプルな構成です。ライブラリは使用していないため、そのままコピーして利用したり、自分のサイトへ組み込んだりしやすくなっています。 

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

各ファイルの役割
index.html
ドロワーメニュー本体と左右の開閉ボタンを配置しています。左側・右側それぞれのタイトルや説明文、ボタンの文字を編集できます。

style.css
レイアウト、色、余白、ドロワーメニューの幅、左右からスライドするアニメーション、レスポンシブ表示を管理しています。デザインを変更したい場合はこのファイルを編集します。

script.js
左右のボタンをクリックした時の表示切り替え、閉じるボタンや背景クリックによるドロワーメニューの非表示処理を管理しています。

設置方法・使い方
sampleフォルダ内へ3ファイルを配置し、index.htmlをブラウザで開くと利用できます。
「左メニュー」をクリックすると左側から、「右メニュー」をクリックすると右側からドロワーメニューが表示されます。背景または「閉じる」ボタンをクリックするとドロワーメニューを閉じることができます。

カスタマイズできる内容
index.htmlでは左右それぞれのタイトル、説明文、ボタン名を変更できます。
style.cssではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、左右から表示されるアニメーション速度などを変更できます。
script.jsでは表示・非表示の処理や、左右どちらのドロワーメニューを表示するかを変更できます。

数値調整
style.cssの「width:360px;」を変更するとドロワーメニューの横幅が変わります。
style.cssの「animation: ～ .35s ease forwards;」の「.35s」はアニメーション時間です。値を大きくするとゆっくり、小さくすると速く表示されます。
style.cssの「max-width:90%;」を変更すると、小さい画面で表示される最大幅を調整できます。

レスポンシブ対応
style.cssのメディアクエリでレスポンシブ対応しています。画面幅640px以下では左右のボタンを縦並びに変更し、ドロワーメニューも画面幅いっぱいに表示されるため、スマートフォン・タブレット・パソコンでも操作しやすく利用できます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント