背景クリックで閉じられるドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

背景クリックで閉じられるドロワーメニューの作り方

背景クリックで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、メニューの外側にある半透明の背景部分をクリックすると閉じられます。HTMLでメニューの構造を作成し、CSSでレイアウトとスライド表示を設定、JavaScriptで開閉処理を制御します。

ドロワーメニューの外側をクリックするだけで閉じられるため、閉じるボタンを探さずに直感的な操作ができます。企業サイトのナビゲーション、会員サイトの設定メニュー、管理画面の操作一覧、ECサイトの商品カテゴリーなど、必要なときだけメニューを表示したい画面で利用できます。

メニューのタイトルやリンク項目、ドロワーメニューの横幅、背景色、余白、影、背景オーバーレイの暗さ、表示アニメーションの速度を変更できます。画面幅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>

  <!-- サンプル全体を囲むエリア -->
  <div class="background-click-close-drawer-menu_wrap">

    <!-- 見出し -->
    <h1 class="background-click-close-drawer-menu_title">
      背景クリックで閉じられるドロワーメニュー
    </h1>

    <!-- 説明文 -->
    <p class="background-click-close-drawer-menu_text">
      ボタンをクリックするとドロワーメニューが表示されます。
    </p>

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

      メニューを開く

    </button>

  </div>

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

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

      <!-- メニュータイトル -->
      <h2
        class="background-click-close-drawer-menu_drawer-title"
        id="drawer-title">

        メニュー

      </h2>

      <!-- メニュー説明 -->
      <p class="background-click-close-drawer-menu_drawer-text">
        背景をクリックするとドロワーメニューが閉じます。
      </p>

      <!-- メニュー一覧 -->
      <nav class="background-click-close-drawer-menu_nav">

        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">お知らせ</a>
        <a href="#">お問い合わせ</a>

      </nav>

    </aside>

  </div>

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

</body>

</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニューの構造を作成し、CSSで見た目やアニメーションを設定、JavaScriptで開閉処理を行います。

「メニューを開く」をクリックするとドロワーメニューが表示され、背景部分をクリックすると閉じます。シンプルな操作で利用できるため、ナビゲーションや管理画面、会員サイトなど幅広いWebサイトへ導入できます。

タイトルやメニュー項目、リンク先、配色、横幅、背景の暗さ、表示速度なども自由に変更できます。レスポンシブ対応しているため、スマートフォン・タブレット・PCで利用できます。 

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

各ファイルの役割
index.html
ドロワーメニューのレイアウトを管理します。タイトル、説明文、ボタン、メニュー項目、リンク先URLを編集できます。

style.css
背景色、横幅、余白、角丸、影、背景オーバーレイ、アニメーションなどのデザインを設定します。

script.js
ドロワーメニューを開く処理と背景クリックで閉じる処理を管理します。

設置方法・使い方
sampleフォルダへ3つのファイルを配置し、sample/index.htmlをブラウザで開きます。「メニューを開く」をクリックするとドロワーメニューが表示され、背景部分をクリックすると閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー項目、リンク先URLを変更できます。style.cssでは背景色、ボタン色、横幅、余白、角丸、影、背景の暗さ、アニメーション速度を変更できます。script.jsでは開閉処理や背景クリック時の動作を変更できます。

数値調整
width:360px;はドロワーメニューの横幅、padding:28px;は内側余白、background:rgba(0,0,0,.5);の.5は背景の暗さ、.35sは表示アニメーション時間です。それぞれ変更すると表示サイズや演出速度が変わります。

レスポンシブ対応
style.cssではmax-widthと@media screen and (max-width:640px)を使用しています。スマートフォンではドロワーメニューを画面幅いっぱいに表示し、タブレット・PCでも画面サイズに合わせて利用できます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント