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

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

スワイプ・ドラッグで閉じられるドロップダウンメニューの作り方を紹介します。このサンプルでは、「メニュー」ボタンをクリックするとドロップダウンメニューが表示され、画面上をスワイプまたはドラッグするとメニューが閉じます。スマートフォンでは指でスワイプ、PCではマウスドラッグで操作できるため、さまざまなデバイスで自然な操作感を実現できます。

JavaScriptでは、ドロップダウンメニューを開いた状態でドラッグ開始位置を記録し、一定距離以上移動した場合にメニューを閉じる処理を実装しています。マウス操作とタッチ操作の両方に対応しているため、追加ライブラリを使用せずにスワイプ・ドラッグ操作を実現できます。

メニュー項目やタイトルはHTMLから変更でき、デザインはCSSで自由にカスタマイズできます。ドラッグ判定に使用する移動距離はJavaScriptから簡単に調整できるため、用途に合わせた操作感へ変更することも可能です。レスポンシブ対応なので、スマートフォン・タブレット・PCでそのまま利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

メニューを開いた状態で、画面上を約50px以上スワイプ・ドラッグすると閉じます。

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

<!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="swipe-close-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="swipe-close-dropdown-menu_title">
      スワイプ・ドラッグで閉じるドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="swipe-close-dropdown-menu_text">
      メニューを開いたあと、画面上をスワイプ・ドラッグすると閉じます。
    </p>

    <!-- メニュー配置エリア -->
    <div class="swipe-close-dropdown-menu_group">

      <!-- ドロップダウンメニューエリア -->
      <div class="swipe-close-dropdown-menu_area">

        <!-- メニューを開閉するボタン -->
        <button
          class="swipe-close-dropdown-menu_button"
          type="button"
          data-swipe-dropdown-button>

          メニュー

          <span class="swipe-close-dropdown-menu_arrow">
            ▼
          </span>

        </button>

        <!-- ドロップダウンメニュー -->
        <ul
          class="swipe-close-dropdown-menu_list"
          data-swipe-dropdown-list>

          <li>
            <a
              class="swipe-close-dropdown-menu_link"
              href="#">
              ホーム
            </a>
          </li>

          <li>
            <a
              class="swipe-close-dropdown-menu_link"
              href="#">
              サービス
            </a>
          </li>

          <li>
            <a
              class="swipe-close-dropdown-menu_link"
              href="#">
              お問い合わせ
            </a>
          </li>

        </ul>

      </div>

    </div>

  </div>

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

</body>
</html>

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

/* ドロップダウンメニュー全体 */
.swipe-close-dropdown-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小する */
  max-width:700px; /* 全体の最大横幅 */
  margin:40px auto; /* 上下40px・左右中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 外枠 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 背景色 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* タイトル */
.swipe-close-dropdown-menu_title{
  margin:0 0 12px; /* 下側に12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* 太字 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.swipe-close-dropdown-menu_text{
  margin:0 0 24px; /* 下側に24pxの余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* メニュー配置エリア */
.swipe-close-dropdown-menu_group{
  display:flex; /* Flexboxを使用 */
  justify-content:center; /* 水平方向の中央配置 */
}

/* ドロップダウンメニューエリア */
.swipe-close-dropdown-menu_area{
  position:relative; /* メニューの表示位置の基準 */
  width:100%; /* 利用可能な横幅いっぱいに表示 */
  max-width:280px; /* メニューの最大横幅 */
}

/* メニューを開閉するボタン */
.swipe-close-dropdown-menu_button{
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 垂直方向の中央配置 */
  justify-content:space-between; /* 文字と矢印を左右に配置 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:52px; /* ボタンの最小高さ */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:none; /* 枠線を削除 */
  border-radius:10px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* 親要素のフォントを継承 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスポインターを指の形にする */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* ボタン内の矢印 */
.swipe-close-dropdown-menu_arrow{
  flex-shrink:0; /* 矢印が縮まないようにする */
  margin-left:12px; /* 左側に12pxの余白 */
  font-size:12px; /* 矢印の文字サイズ */
}

/* ドロップダウンメニュー */
.swipe-close-dropdown-menu_list{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 10px); /* ボタンの下から10px空けて表示 */
  left:0; /* 左端を揃える */
  z-index:10; /* 周囲の要素より手前に表示 */
  width:100%; /* ボタンと同じ横幅にする */
  margin:0; /* 外側余白を削除 */
  padding:8px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:10px; /* メニューの角丸 */
  background:#ffffff; /* メニューの背景色 */
  box-shadow:0 10px 24px rgba(15,23,42,.12); /* メニューの影 */
  list-style:none; /* リストマーカーを削除 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* メニューが開いている状態 */
.swipe-close-dropdown-menu_list.is-open{
  display:block; /* ドロップダウンメニューを表示 */
}

/* メニュー内のリンク */
.swipe-close-dropdown-menu_link{
  display:block; /* リンク全体をクリックできるようにする */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border-radius:8px; /* リンクの角丸 */
  color:#111827; /* リンクの文字色 */
  line-height:1.5; /* 行間 */
  text-align:left; /* 左揃え */
  text-decoration:none; /* 下線を削除 */
}

/* メニュー内のリンクへマウスを重ねた状態 */
.swipe-close-dropdown-menu_link:hover{
  background:#eff6ff; /* 背景色を薄い青色へ変更 */
}

/* 画面幅640px以下の表示 */
@media (max-width:640px){

  /* ドロップダウンメニュー全体 */
  .swipe-close-dropdown-menu_wrap{
    padding:24px 18px; /* スマートフォン用の内側余白 */
  }

}

// メニューを開閉するボタンを取得
const swipeDropdownButton=document.querySelector(
  "[data-swipe-dropdown-button]"
);

// ドロップダウンメニューを取得
const swipeDropdownList=document.querySelector(
  "[data-swipe-dropdown-list]"
);

// スワイプ・ドラッグを開始した横方向の位置
let startX=0;

// スワイプ・ドラッグを開始した縦方向の位置
let startY=0;

// メニューを閉じるために必要な移動距離
// 50は50pxを表し、値を大きくすると長い操作が必要になる
const closeDistance=50;

// メニューボタンをクリックしたとき
swipeDropdownButton.addEventListener("click",function(){

  // ドロップダウンメニューの表示と非表示を切り替える
  swipeDropdownList.classList.toggle("is-open");

});

// マウスドラッグを開始したとき
document.addEventListener("mousedown",function(event){

  // ドラッグ開始時の横方向の位置を記録
  startX=event.clientX;

  // ドラッグ開始時の縦方向の位置を記録
  startY=event.clientY;

});

// マウスドラッグを終了したとき
document.addEventListener("mouseup",function(event){

  // メニューが閉じている場合は処理を終了
  if(!swipeDropdownList.classList.contains("is-open")){
    return;
  }

  // 横方向の移動距離を計算
  const moveX=Math.abs(event.clientX-startX);

  // 縦方向の移動距離を計算
  const moveY=Math.abs(event.clientY-startY);

  // 横方向または縦方向へ指定距離以上ドラッグした場合
  if(moveX>closeDistance||moveY>closeDistance){

    // ドロップダウンメニューを閉じる
    swipeDropdownList.classList.remove("is-open");

  }

});

// タッチ操作を開始したとき
document.addEventListener("touchstart",function(event){

  // スワイプ開始時の横方向の位置を記録
  startX=event.touches[0].clientX;

  // スワイプ開始時の縦方向の位置を記録
  startY=event.touches[0].clientY;

});

// タッチ操作を終了したとき
document.addEventListener("touchend",function(event){

  // メニューが閉じている場合は処理を終了
  if(!swipeDropdownList.classList.contains("is-open")){
    return;
  }

  // 横方向の移動距離を計算
  const moveX=Math.abs(event.changedTouches[0].clientX-startX);

  // 縦方向の移動距離を計算
  const moveY=Math.abs(event.changedTouches[0].clientY-startY);

  // 横方向または縦方向へ指定距離以上スワイプした場合
  if(moveX>closeDistance||moveY>closeDistance){

    // ドロップダウンメニューを閉じる
    swipeDropdownList.classList.remove("is-open");

  }

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロップダウンメニュー本体を配置し、CSSではレイアウトや配色などのデザインを設定しています。JavaScriptではメニューの開閉と、スワイプ・ドラッグ操作によってメニューを閉じる処理を実装しています。

「メニュー」ボタンをクリックするとドロップダウンメニューが表示されます。メニューが開いている状態で画面上を一定距離以上スワイプまたはドラッグすると、自動でメニューが閉じます。マウス操作とタッチ操作の両方に対応しているため、PCとスマートフォンのどちらでも同じように利用できます。

メニュー項目やタイトルはHTML、デザインはCSS、スワイプ・ドラッグ判定はJavaScriptで管理しています。それぞれの役割をファイルごとに分けているため、初心者でも編集場所が分かりやすく、用途に合わせてカスタマイズしやすい構成になっています。

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

各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。タイトル、説明文、「メニュー」ボタンの文字、メニュー項目、リンク先を変更できます。

style.cssは見た目を設定するファイルです。背景色、文字色、ボタンの色、横幅、余白、角丸、影などのデザインを変更できます。

script.jsはメニューの開閉とスワイプ・ドラッグ操作を管理するファイルです。メニューを表示・非表示にする処理と、一定距離以上のスワイプ・ドラッグを検出してメニューを閉じる処理を実装しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「メニュー」をクリックするとドロップダウンメニューが表示され、画面上をスワイプまたはドラッグすると閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、「メニュー」ボタンの文字、メニュー項目、リンク先を変更できます。

style.cssではドロップダウンメニューの横幅、背景色、文字色、余白、角丸、影、ボタンの色などを変更できます。

script.jsではスワイプ・ドラッグで閉じる判定距離や、開閉処理などを用途に合わせて変更できます。

数値調整
style.css
max-width:700px;
コンテンツ全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。

padding:32px;
コンテンツ全体の内側余白です。値を変更すると余白の広さが変わります。

max-width:280px;
ドロップダウンメニューの最大横幅です。値を変更するとメニューの横幅が変わります。

min-height:52px;
「メニュー」ボタンの高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。

script.js
const closeDistance=50;
50は50pxを表します。スワイプ・ドラッグでメニューを閉じるために必要な移動距離です。値を大きくすると長く操作しないと閉じなくなり、小さくすると短い操作でも閉じるようになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-width:700pxによって画面幅に応じてレイアウトが調整されます。また、@media (max-width:640px)では内側余白を変更し、小さい画面でも見やすく表示できるようになっています。スマートフォン・タブレット・PCでそのまま利用できます。