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

スワイプ・ドラッグで閉じられるドロワーメニューの作り方

スワイプ・ドラッグで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、メニュー本体を左方向へ動かすと閉じられます。スマートフォンでは指によるスワイプ、パソコンではマウスによるドラッグで同じ操作を確認できます。

JavaScriptのPointer Eventsを使用しているため、タッチ操作とマウス操作を別々に実装する必要がありません。スワイプまたはドラッグを開始した位置と終了した位置を比較し、左方向へ一定距離以上移動した場合だけドロワーメニューを閉じます。ナビゲーションメニュー、会員サイト、管理画面、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="swipe-drag-close-drawer-menu_container">

    <h1>スワイプ・ドラッグで閉じられるドロワーメニュー</h1>

    <p>
      メニューを開いたあと、左方向へスワイプまたはドラッグすると閉じられます。
    </p>

    <button
      class="swipe-drag-close-drawer-menu_open"
      type="button"
      data-swipe-drag-drawer-open>
      メニューを開く
    </button>

  </div>

  <div
    class="swipe-drag-close-drawer-menu_overlay"
    data-swipe-drag-drawer-overlay
    aria-hidden="true">

    <aside
      class="swipe-drag-close-drawer-menu_drawer"
      data-swipe-drag-drawer
      aria-labelledby="drawer-title">

      <h2
        id="drawer-title"
        class="swipe-drag-close-drawer-menu_title">
        メニュー
      </h2>

      <p class="swipe-drag-close-drawer-menu_text">
        左方向へスワイプまたはドラッグすると閉じます。
      </p>

      <nav class="swipe-drag-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>

/* =========================================
   共通設定
========================================= */

/* すべての要素と疑似要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ内のボタン */
button{
  font:inherit; /* 親要素と同じフォントを使用 */
}

/* =========================================
   案内エリア
========================================= */

/* 案内エリア全体 */
.swipe-drag-close-drawer-menu_container{
  width:100%; /* 画面幅に合わせて縮小表示 */
  max-width:700px; /* 最大横幅。値を大きくすると案内エリアが広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 枠線の太さ・種類・色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 案内エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
}

/* 案内エリアのタイトル */
.swipe-drag-close-drawer-menu_container h1{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 案内エリアの説明文 */
.swipe-drag-close-drawer-menu_container > p{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* =========================================
   開くボタン
========================================= */

/* ドロワーメニューを開くボタン */
.swipe-drag-close-drawer-menu_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}

/* 開くボタンへマウスを重ねた状態 */
.swipe-drag-close-drawer-menu_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* =========================================
   背景オーバーレイ
========================================= */

/* ドロワーメニュー表示時の背景 */
.swipe-drag-close-drawer-menu_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  background:rgba(0,0,0,.45); /* 半透明の背景色。.45を大きくすると暗くなる */
}

/* ドロワーメニューの表示状態 */
.swipe-drag-close-drawer-menu_overlay.is-active{
  display:block; /* 表示用クラスが付いたときに表示 */
}

/* =========================================
   ドロワーメニュー本体
========================================= */

/* ドロワーメニュー本体 */
.swipe-drag-close-drawer-menu_drawer{
  width:340px; /* ドロワーメニューの横幅。値を大きくすると広がる */
  max-width:90%; /* 小さい画面で画面幅を超えない最大横幅 */
  height:100%; /* ブラウザ画面と同じ高さにする */
  padding:28px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示 */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* ドロワーメニュー右側の影 */
  transform:translateX(-100%); /* 初期状態では画面左側の外へ配置 */
  transition:transform .3s ease; /* 0.3秒で位置を変化。値を大きくすると遅くなる */
  touch-action:none; /* スワイプ中のブラウザ標準操作を抑制 */
  user-select:none; /* ドラッグ中の文字選択を防ぐ */
  cursor:grab; /* ドラッグ可能であることを示すカーソル */
}

/* ドロワーメニューを操作している状態 */
.swipe-drag-close-drawer-menu_drawer.is-dragging{
  cursor:grabbing; /* ドラッグ中のカーソルへ変更 */
}

/* オーバーレイ表示中のドロワーメニュー */
.swipe-drag-close-drawer-menu_overlay.is-active
.swipe-drag-close-drawer-menu_drawer{
  transform:translateX(0); /* 画面内の元の位置へ移動 */
}

/* ドロワーメニューのタイトル */
.swipe-drag-close-drawer-menu_title{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* ドロワーメニューの説明文 */
.swipe-drag-close-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* =========================================
   メニューリンク
========================================= */

/* メニューリンクを並べるエリア */
.swipe-drag-close-drawer-menu_nav{
  display:flex; /* メニューリンクを並べる */
  flex-direction:column; /* メニューリンクを縦方向へ配置 */
  gap:12px; /* メニューリンク同士の間隔 */
}

/* メニューリンク */
.swipe-drag-close-drawer-menu_nav a{
  display:block; /* リンク全体をクリックできるようにする */
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 16px; /* 上下12px・左右16pxの内側余白 */
  border-radius:8px; /* リンクの角丸。値を大きくすると丸みが強くなる */
  background:#f3f4f6; /* リンクの背景色 */
  color:#111827; /* リンクの文字色 */
  font-size:16px; /* リンクの文字サイズ */
  font-weight:700; /* リンク文字を太字にする */
  line-height:1.5; /* リンク文字の行間 */
  text-decoration:none; /* リンクの下線を削除 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* メニューリンクへマウスを重ねた状態 */
.swipe-drag-close-drawer-menu_nav a:hover{
  background:#e5e7eb; /* ホバー時の背景色 */
}

/* =========================================
   スマートフォン対応
========================================= */

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
  }

  /* スマートフォン用の案内エリア */
  .swipe-drag-close-drawer-menu_container{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用の開くボタン */
  .swipe-drag-close-drawer-menu_open{
    width:100%; /* ボタンを案内エリアの横幅いっぱいに表示 */
  }

  /* スマートフォン用のドロワーメニュー */
  .swipe-drag-close-drawer-menu_drawer{
    width:100%; /* ドロワーメニューを画面幅いっぱいに表示 */
    max-width:100%; /* 最大横幅を画面幅に合わせる */
    padding:24px 20px; /* 内側余白を縮小 */
  }

}

// =========================================
// 必要な要素を取得
// =========================================

// ドロワーメニューを開くボタン
const swipeDragDrawerOpen=document.querySelector(
  "[data-swipe-drag-drawer-open]"
);

// 背景オーバーレイ
const swipeDragDrawerOverlay=document.querySelector(
  "[data-swipe-drag-drawer-overlay]"
);

// ドロワーメニュー本体
const swipeDragDrawer=document.querySelector(
  "[data-swipe-drag-drawer]"
);

// スワイプ開始位置
let swipeDragStartX=0;

// ドラッグ中かどうか
let swipeDragIsDragging=false;

// =========================================
// ドロワーメニューを開く
// =========================================

// 開くボタンをクリック
swipeDragDrawerOpen.addEventListener("click",function(){

  // ドロワーメニューを表示
  swipeDragDrawerOverlay.classList.add("is-active");

  // aria-hidden属性を更新
  swipeDragDrawerOverlay.setAttribute(
    "aria-hidden",
    "false"
  );

});

// =========================================
// スワイプ・ドラッグ開始
// =========================================

// ポインター操作開始
swipeDragDrawer.addEventListener("pointerdown",function(event){

  // 開始位置を保存
  swipeDragStartX=event.clientX;

  // ドラッグ開始
  swipeDragIsDragging=true;

  // ドラッグ中の見た目へ変更
  swipeDragDrawer.classList.add("is-dragging");

  // ポインターを保持
  swipeDragDrawer.setPointerCapture(event.pointerId);

});

// =========================================
// スワイプ・ドラッグ終了
// =========================================

// ポインター操作終了
swipeDragDrawer.addEventListener("pointerup",function(event){

  // ドラッグ中でなければ終了
  if(!swipeDragIsDragging){
    return;
  }

  // ドラッグ終了
  swipeDragIsDragging=false;

  // ドラッグ中の見た目を解除
  swipeDragDrawer.classList.remove("is-dragging");

  // ポインター保持を解除
  swipeDragDrawer.releasePointerCapture(event.pointerId);

  // 左方向へ移動した距離
  const swipeDragDistance=
    swipeDragStartX-event.clientX;

  // 80px以上スワイプ・ドラッグしたら閉じる
  // 値を大きくすると閉じにくくなり、小さくすると閉じやすくなる
  if(swipeDragDistance>80){

    // ドロワーメニューを閉じる
    swipeDragDrawerOverlay.classList.remove("is-active");

    // aria-hidden属性を更新
    swipeDragDrawerOverlay.setAttribute(
      "aria-hidden",
      "true"
    );

  }

});

// =========================================
// ポインター操作が中断された場合
// =========================================

// 操作がキャンセルされた場合
swipeDragDrawer.addEventListener("pointercancel",function(){

  // ドラッグ状態を解除
  swipeDragIsDragging=false;

  // ドラッグ中の見た目を解除
  swipeDragDrawer.classList.remove("is-dragging");

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで案内エリアとドロワーメニューを配置し、CSSでレイアウトや表示アニメーションを設定、JavaScriptでスワイプ・ドラッグ操作を判定します。

「メニューを開く」をクリックすると画面左側からドロワーメニューが表示されます。表示後にメニュー本体を左方向へ80pxより大きくスワイプまたはドラッグすると閉じます。Pointer Eventsを使用しているため、指とマウスの両方で操作できます。

メニュー名やリンク先、横幅、配色、余白、影、アニメーション時間、閉じる判定距離を変更できます。画面幅640px以下ではドロワーメニューと開くボタンを横幅いっぱいに表示します。

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

各ファイルの役割
index.html
タイトル、説明文、開くボタン、ドロワーメニュー、メニューリンクを配置しています。リンク先は各a要素のhref属性、表示名は開始タグと終了タグの間の文字を編集します。

style.css
案内エリア、ボタン、背景オーバーレイ、ドロワーメニュー、メニューリンク、表示アニメーション、レスポンシブ表示を管理します。横幅、色、余白、角丸、影、表示速度を変更できます。

script.js
開くボタンによる表示、ポインターの開始位置と終了位置の取得、左方向への移動距離の計算、閉じる判定を行います。

設置方法・使い方
sampleフォルダ内へ3ファイルを同じ階層で配置し、sample/index.htmlをブラウザで開きます。「メニューを開く」をクリックしたあと、ドロワーメニューを左方向へスワイプまたはドラッグすると閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー名、リンク先URLを変更できます。style.cssでは背景色、文字色、横幅、余白、角丸、影、背景オーバーレイの暗さ、アニメーション時間を変更できます。script.jsでは閉じる判定に使用する移動距離を変更できます。

数値調整
style.cssのwidth:340px;はドロワーメニューの横幅、padding:28px;は内側余白、background:rgba(0,0,0,.45);の.45は背景オーバーレイの暗さです。transition:transform .3s ease;の.3sを大きくすると表示が遅くなり、小さくすると速くなります。script.jsの80は閉じる判定距離です。値を大きくすると閉じにくくなり、小さくすると少ない移動量で閉じます。

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