スワイプ・ドラッグで閉じられるドロワーメニューを作る方法
スワイプ・ドラッグで閉じられるドロワーメニューを作る方法を紹介します。このサンプルでは、画面左側から表示されるドロワーメニューを、マウスで右方向へドラッグしたり、スマートフォンやタブレットで右方向へスワイプしたりすると閉じられるメニューを作成します。Pointer Eventsを使用しているため、PCではドラッグ操作、タッチ対応端末ではスワイプ操作を同じコードで実装できます。
ハンバーガーメニューを利用するWebサイトや管理画面、会員サイト、ECサイトなどで利用しやすく、閉じるボタンへカーソルを移動しなくても、直感的な操作でメニューを閉じられます。一定距離以上ドラッグ・スワイプした場合のみ閉じるため、軽く触れただけで誤って閉じてしまうことも防げます。移動距離が足りない場合は、ドロワーメニューが元の位置へ戻るため、自然な操作感で利用できます。
HTMLではタイトルやメニュー項目、説明文を変更でき、CSSではドロワーメニューの横幅、背景色、文字色、余白、影などを調整できます。JavaScriptでは閉じるまでに必要な移動距離やアニメーション時間を変更できるため、用途に合わせた操作感へカスタマイズできます。レスポンシブ対応のため、スマートフォン・タブレット・PCでそのまま利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックしたあと、ドロワーメニュー上または半透明の背景部分から左方向へ100px以上スワイプ・ドラッグすると閉じます。移動距離が足りない場合は元の位置へ戻ります。
コードをコピーして使おう！
<!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>
<!-- ドロワーメニューを開くボタン -->
<button
class="swipe-drag-close-drawer_open-button"
type="button"
data-swipe-drag-drawer-open
aria-expanded="false"
aria-controls="drawer-menu">
メニューを開く
</button>
<!-- オーバーレイ -->
<div
class="swipe-drag-close-drawer_overlay"
data-swipe-drag-drawer-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<nav
class="swipe-drag-close-drawer_panel"
id="drawer-menu"
aria-label="ドロワーメニュー"
data-swipe-drag-drawer>
<!-- タイトル -->
<div class="swipe-drag-close-drawer_title">
メニュー
</div>
<!-- 説明文 -->
<p class="swipe-drag-close-drawer_text">
左へスワイプ・ドラッグするとメニューを閉じられます。
</p>
<!-- メニュー一覧 -->
<ul class="swipe-drag-close-drawer_list">
<!-- メニュー項目 -->
<li>
<a href="#">ホーム</a>
</li>
<!-- メニュー項目 -->
<li>
<a href="#">サービス</a>
</li>
<!-- メニュー項目 -->
<li>
<a href="#">お問い合わせ</a>
</li>
<!-- メニュー項目 -->
<li>
<a href="#">会社概要</a>
</li>
</ul>
</nav>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニュー本体やオーバーレイ、開閉ボタン、メニュー項目を配置し、CSSではレイアウトやデザイン、アニメーションを設定します。JavaScriptではPointer Eventsを利用して、スマートフォンではスワイプ、パソコンではマウスドラッグでドロワーメニューを閉じる処理を実装しています。
ドロワーメニューは画面左側から表示され、左方向へスワイプ・ドラッグすると指やマウスの動きに合わせて移動します。一定距離以上移動した状態で操作を終了するとメニューが閉じ、移動距離が不足している場合は元の位置へ戻る仕組みです。Pointer Eventsを使用しているため、1つのコードでマウス操作とタッチ操作の両方へ対応できます。
サンプルはindex.html、style.css、script.jsの3ファイルだけで動作します。すべて同じsampleフォルダへ配置し、index.htmlをブラウザで開くだけで利用できるため、初めてドロワーメニューを実装する方でも導入しやすい構成になっています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはドロワーメニュー全体を構成するファイルです。開くボタン、メニュータイトル、説明文、メニュー項目を記述しています。タイトルや説明文、リンク名、リンク先を変更したい場合はindex.htmlを編集します。
style.cssはドロワーメニューの見た目を設定するファイルです。ボタンのデザイン、オーバーレイの背景色、ドロワーメニューの横幅、余白、文字サイズ、角丸、影、ホバー時の背景色、レスポンシブ表示などを変更できます。
script.jsはドロワーメニューの動作を制御するファイルです。開閉処理、Pointer Eventsによるスワイプ・ドラッグ操作、移動距離の判定、一定距離以上ドラッグした場合に閉じる処理、元の位置へ戻す処理を記述しています。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルは同じ階層へ保存してください。index.htmlではstyle.cssとscript.jsを読み込んでいるため、ファイル名や配置場所を変更する場合は読み込み先も合わせて修正します。
sample/index.htmlをブラウザで開き、「メニューを開く」ボタンを押すとドロワーメニューが表示されます。表示されたドロワーメニューまたはオーバーレイ上で左方向へスワイプ・ドラッグすると、メニューが移動します。一定距離以上移動した状態で指やマウスを離すと閉じ、距離が不足している場合は元の位置へ戻ります。
カスタマイズできる内容
index.htmlでは、開くボタンの文章、メニュータイトル、説明文、メニュー項目の表示内容、リンク先、表示順を変更できます。メニュー項目を追加・削除する場合もindex.htmlを編集します。
style.cssでは、ボタンやドロワーメニューの背景色、文字色、横幅、余白、角丸、影、タイトルサイズ、リンクのホバー色、オーバーレイの背景色などを変更できます。用途に合わせてデザイン全体を自由に調整できます。
script.jsでは、ドラッグとして認識する移動距離や、ドロワーメニューを閉じるために必要な移動距離、開閉時のアニメーション時間を変更できます。スワイプ・ドラッグの操作感を用途に合わせて調整できます。
数値調整
style.css
width:320px;
ドロワーメニューの横幅です。値を大きくすると広くなり、小さくするとコンパクトになります。
max-width:90%;
画面幅に対する最大サイズです。値を変更すると小さい画面で表示される横幅が変わります。
padding:32px 24px;
ドロワーメニュー内側の余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、小さくすると四角に近づきます。
transition:transform .3s ease;
ドロワーメニューの開閉アニメーション時間です。0.3秒で動作します。値を大きくするとゆっくり、小さくすると速く動きます。
script.js
dragStartDistance = 10;
10は10pxを表します。ドラッグとして認識する移動距離です。値を大きくするとドラッグ判定が遅くなり、小さくすると少しの移動でもドラッグとして認識します。
closeDistance = 120;
120は120pxを表します。左方向へ120px以上移動した場合にドロワーメニューを閉じます。値を大きくすると閉じにくくなり、小さくすると短い距離でも閉じるようになります。
transform .3s ease
script.js内でも0.3秒で閉じる・戻るアニメーションを設定しています。style.cssと同じ値へ変更すると動作を統一できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではmax-width:90%;を設定しているため、画面幅が狭い場合でもドロワーメニューが画面内へ収まります。
640px以下ではメディアクエリを使用し、ドロワーメニューの横幅を280px、余白を24px 20pxへ変更しています。タイトルの文字サイズも22pxへ調整されるため、スマートフォンでも見やすく表示できます。
Pointer Eventsを使用しているため、パソコンではマウスドラッグ、スマートフォンやタブレットではスワイプ操作で同じようにドロワーメニューを閉じることができます。
コメント