×ボタンで閉じられるドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

×ボタンで閉じられるドロワーメニューの作り方

×ボタンで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、右上に配置した×ボタンをクリックすると閉じられます。HTMLでメニューとボタンの構造を作成し、CSSでレイアウトやスライド表示を設定、JavaScriptで開閉状態を切り替えます。

閉じる操作を×ボタンへまとめているため、利用者が操作位置を判断しやすく、一般的なWebサイトのメニューとして使いやすい構成です。企業サイトのナビゲーション、会員サイトの設定メニュー、管理画面の操作一覧、ECサイトの商品カテゴリーなど、画面を広く使いながら必要なときだけメニューを表示したい場面に利用できます。

メニューのタイトルやリンク項目、×ボタンの大きさ、背景色、ドロワーメニューの横幅、余白、影、表示アニメーションの速度はコード内から変更できます。画面幅640px以下ではドロワーメニューを画面幅いっぱいに表示するため、スマートフォン・タブレット・PCでも利用できるレスポンシブ対応のサンプルです。

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

デモ

×ボタンで閉じられるドロワーメニュー

ボタンをクリックすると、画面左側からドロワーメニューが表示されます。

「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。右上の「×」ボタンをクリックすると閉じる動作を確認できます。

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

<!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="close-button-drawer-menu_wrap">

    <!-- 案内エリアのタイトル -->
    <div class="close-button-drawer-menu_title">
      ×ボタンで閉じられるドロワーメニュー
    </div>

    <!-- ドロワーメニューの説明文 -->
    <p class="close-button-drawer-menu_text">
      ボタンをクリックすると、画面左側からドロワーメニューが表示されます。
    </p>

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

  </div>

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

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

      <!--
        ドロワーメニューを閉じる×ボタン
        aria-labelには、ボタンの役割が分かる説明を設定する
      -->
      <button
        class="close-button-drawer-menu_close"
        type="button"
        data-close-button-drawer-close
        aria-label="ドロワーメニューを閉じる">
        ×
      </button>

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

      <!-- ×ボタンの操作説明 -->
      <p class="close-button-drawer-menu_drawer-text">
        右上の×ボタンをクリックするとドロワーメニューを閉じられます。
      </p>

      <!-- メニューリンク一覧 -->
      <nav
        class="close-button-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>

    </aside>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、ドロワーメニュー右上の×ボタンをクリックすると閉じられます。HTMLで案内エリア、メニューリンク、×ボタンを配置し、CSSでレイアウトや表示アニメーションを設定、JavaScriptで表示と非表示を制御しています。

このコードでは背景部分をクリックしてもドロワーメニューは閉じません。閉じる操作は右上の×ボタンだけで行うため、誤って背景をクリックしてメニューが閉じる動作を避けたい場合に利用できます。メニューリンクにはサンプルとしてホーム、サービス、お知らせ、お問い合わせを配置しています。

メニューリンクの文字や移動先URL、ドロワーメニューの横幅、×ボタンの位置や大きさ、背景色、余白、影、表示速度などを変更できます。画面幅640px以下ではドロワーメニューを画面幅いっぱいに表示するため、スマートフォン・タブレット・PCで利用できます。 

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

各ファイルの役割
index.html
案内エリア、ドロワーメニュー、×ボタン、タイトル、説明文、メニューリンクを配置しています。メニュー項目を変更する場合は、各a要素の表示文字とhref属性を編集します。例えばhref="#"の#を移動先URLへ変更すると、そのページへ移動できるリンクになります。

style.css
ページ全体、案内エリア、背景オーバーレイ、ドロワーメニュー、×ボタン、メニューリンク、表示アニメーション、レスポンシブ表示を設定しています。ドロワーメニューの横幅、×ボタンの位置やサイズ、色、余白、角丸、影、表示速度を変更する場合は、このファイルを編集します。

script.js
「メニューを開く」ボタンをクリックしたときにドロワーメニューを表示し、右上の×ボタンをクリックしたときに閉じます。背景クリックで閉じる処理は含まれていません。

設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを同じ階層で配置します。配置後にsample/index.htmlをブラウザで開いてください。

「メニューを開く」ボタンをクリックすると、画面左側からドロワーメニューが表示されます。閉じる場合は、ドロワーメニュー右上の×ボタンをクリックします。

カスタマイズできる内容
index.htmlでは、案内エリアのタイトル、説明文、開くボタンの文字、ドロワーメニューのタイトル、説明文、メニュー名、リンク先URLを変更できます。

メニューリンクを変更する場合は、各a要素のhref="#"を移動先URLへ書き換え、開始タグと終了タグの間にある「ホーム」「サービス」などの文字を表示したいメニュー名へ変更します。項目を追加する場合は、同じ形式のa要素をnav要素内へ追加します。

style.cssでは、ページ背景色、案内エリアの横幅、余白、角丸、開くボタンの色、ドロワーメニューの横幅、背景色、影、×ボタンの位置、大きさ、色、メニューリンクの背景色や間隔、表示アニメーションを変更できます。

script.jsでは、開くボタンと×ボタンをクリックしたときの表示切り替え処理を変更できます。

数値調整
style.cssのwidth:360px;はドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると狭くなります。

top:16px;は×ボタンの上端からの位置です。値を大きくすると下へ移動します。right:16px;は右端からの位置で、値を大きくすると左へ移動します。

width:44px;とheight:44px;は×ボタンの大きさです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

font-size:26px;は×記号の文字サイズです。値を大きくすると×が大きく表示されます。

gap:12px;はメニューリンク同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

animation:close-button-drawer-menu-slide .35s ease forwards;の.35sは、ドロワーメニューが表示される時間です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

background:rgba(0,0,0,.5);の.5は背景オーバーレイの透明度です。値を大きくすると背景が暗くなり、小さくすると薄くなります。

レスポンシブ対応
style.cssではwidth:100%、max-width:90%、overflow-y:auto、@media screen and (max-width:640px)を使用してレスポンシブ対応しています。

画面幅640px以下では、案内エリアの余白を縮小し、開くボタンとドロワーメニューを画面幅いっぱいに表示します。ドロワーメニュー内の内容が画面の高さを超えた場合は、内部を縦にスクロールできます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント