外側クリックで閉じられるドロワーメニューの作り方
外側クリックで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンを押すと画面左側からドロワーメニューが表示され、メニューの外側をクリックすると自動で閉じるUIを実装します。メニューを閉じるための専用ボタンを押さなくても直感的に操作できるため、スマートフォンやタブレットでも扱いやすいナビゲーションを作成できます。
お問い合わせ画面、会員サイト、管理画面、ECサイトのカテゴリメニュー、スマートフォン向けナビゲーションなど、メニューを一時的に表示したい場面で利用できます。メニューを開いている間は半透明の背景を表示し、背景部分をクリックするとドロワーメニューが閉じるため、現在メニューが表示中であることも分かりやすくなっています。表示と非表示はスライドアニメーションで切り替わり、自然な操作感を実現できます。
HTMLではタイトルやメニュー項目を変更でき、CSSでは横幅、背景色、文字色、余白、アニメーション時間などを調整できます。JavaScriptは開閉処理と外側クリック時の判定のみで構成されているため、初心者でも内容を理解しやすく、スマートフォン・タブレット・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="drawer-close-outside-click_wrap">
<!-- タイトル -->
<div class="drawer-close-outside-click_title">
外側クリックで閉じるドロワーメニュー
</div>
<!-- 説明文 -->
<p class="drawer-close-outside-click_text">
ボタンを押してメニューを開き、背景部分をクリックすると閉じます。
</p>
<!-- メニューを開くボタン -->
<button
class="drawer-close-outside-click_button"
id="drawer-open">
メニューを開く
</button>
</div>
<!-- オーバーレイ -->
<div
class="drawer-close-outside-click_overlay"
id="drawer-overlay">
</div>
<!-- ドロワーメニュー -->
<nav
class="drawer-close-outside-click_menu"
id="drawer-menu">
<!-- 見出し -->
<div class="drawer-close-outside-click_heading">
メニュー
</div>
<!-- メニュー一覧 -->
<ul class="drawer-close-outside-click_list">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* デモ全体 */
.drawer-close-outside-click_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* デモ全体の背景色 */
text-align:center; /* 内容を中央揃えにする */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* タイトル */
.drawer-close-outside-click_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
}
/* 説明文 */
.drawer-close-outside-click_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* メニューを開くボタン */
.drawer-close-outside-click_button{
padding:12px 24px; /* 上下12px・左右24px。値を大きくするとボタンが大きくなる */
border:none; /* ブラウザ標準の枠線を非表示 */
border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-family:inherit; /* ページ全体と同じフォントを使用 */
cursor:pointer; /* マウスを重ねたときに指の形へ変更 */
}
/* 半透明の背景 */
.drawer-close-outside-click_overlay{
position:fixed; /* 画面を基準に固定 */
inset:0; /* 画面全体へ広げる */
background:rgba(0,0,0,.35); /* 背景の黒色と透明度 */
opacity:0; /* 閉じているときは透明にする */
visibility:hidden; /* 閉じているときは操作対象から外す */
transition:
opacity .3s ease,
visibility .3s ease;
/*
0.3秒で背景の表示を切り替える。
値を大きくすると遅くなり、小さくすると速くなる。
*/
z-index:9998; /* 通常のコンテンツより手前へ表示 */
}
/* 半透明の背景を表示 */
.drawer-close-outside-click_overlay.is-open{
opacity:1; /* 背景を表示 */
visibility:visible; /* 背景を操作できる状態にする */
}
/* ドロワーメニュー */
.drawer-close-outside-click_menu{
position:fixed; /* 画面を基準に固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
width:280px; /* メニューの横幅。値を大きくすると横に広がる */
max-width:80%; /* 狭い画面では画面幅の80%以内に収める */
height:100%; /* 画面の高さいっぱいに表示 */
padding:24px; /* 内側の余白。値を大きくすると余白が広がる */
background:#ffffff; /* メニューの背景色 */
box-shadow:8px 0 24px rgba(15,23,42,.16); /* 右側の影。数値を大きくすると影が広がる */
box-sizing:border-box; /* paddingを横幅と高さへ含める */
transform:translateX(-100%); /* 初期状態では画面左側へ隠す */
transition:transform .3s ease;
/*
0.3秒でメニューをスライドする。
値を大きくすると遅くなり、小さくすると速くなる。
*/
z-index:9999; /* 半透明の背景より手前へ表示 */
}
/* ドロワーメニューを表示 */
.drawer-close-outside-click_menu.is-open{
transform:translateX(0); /* メニューを画面内へ移動 */
}
/* メニューの見出し */
.drawer-close-outside-click_heading{
margin:0 0 20px; /* 下側20pxの余白。値を大きくすると一覧との間隔が広がる */
font-size:20px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* 見出しを太字にする */
}
/* メニュー一覧 */
.drawer-close-outside-click_list{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:0; /* ブラウザ標準の内側余白を削除 */
list-style:none; /* リストのマーカーを非表示 */
}
/* 2番目以降のメニュー項目 */
.drawer-close-outside-click_list li+li{
margin-top:12px; /* 項目間の余白。値を大きくすると間隔が広がる */
}
/* メニューリンク */
.drawer-close-outside-click_list a{
display:block; /* リンク全体をクリックできるようにする */
padding:12px 14px; /* 上下12px・左右14px。値を大きくするとクリック範囲が広がる */
border-radius:8px; /* リンクの角丸。値を大きくすると丸みが強くなる */
color:#111827; /* リンクの文字色 */
text-decoration:none; /* リンクの下線を非表示 */
}
/* メニューリンクへマウスを重ねたとき */
.drawer-close-outside-click_list a:hover{
background:#eff6ff; /* マウスを重ねたときの背景色 */
color:#1d4ed8; /* マウスを重ねたときの文字色 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* デモ全体 */
.drawer-close-outside-click_wrap{
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
}
// メニューを開くボタンを取得
const drawerOpenButton=document.getElementById("drawer-open");
// ドロワーメニューを取得
const drawerMenu=document.getElementById("drawer-menu");
// 半透明の背景を取得
const drawerOverlay=document.getElementById("drawer-overlay");
// ドロワーメニューを開く処理
function openDrawerMenu(){
// ドロワーメニューを表示
drawerMenu.classList.add("is-open");
// 半透明の背景を表示
drawerOverlay.classList.add("is-open");
}
// ドロワーメニューを閉じる処理
function closeDrawerMenu(){
// ドロワーメニューを非表示
drawerMenu.classList.remove("is-open");
// 半透明の背景を非表示
drawerOverlay.classList.remove("is-open");
}
// ボタンをクリックしたときにメニューを開く
drawerOpenButton.addEventListener("click",openDrawerMenu);
// メニューの外側をクリックしたときに閉じる
drawerOverlay.addEventListener("click",closeDrawerMenu);
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニューとオーバーレイ、メニューを開くボタンを配置し、CSSではレイアウトやスライドアニメーション、JavaScriptではメニューの開閉処理と外側クリックで閉じる処理を実装しています。シンプルな構成のため、初心者でも内容を理解しやすく、そのままWebサイトへ導入しやすいサンプルです。
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ではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、ボタンデザイン、スライドアニメーションの速度などを変更できます。JavaScriptは現在の開閉動作を利用したまま、メニュー項目の追加や変更にも対応できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
width:280px;
ドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると細くなります。
padding:24px;
ドロワーメニュー内の余白です。値を大きくすると項目との間隔が広がります。
transition:0.3s;
ドロワーメニューと背景が切り替わる時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
border-radius:18px;
デモ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じてレイアウトが調整されます。また、ドロワーメニューはmax-width:80%を指定しているため、スマートフォンでも画面幅を超えず表示できます。さらに640px以下ではpadding:24px 18px;へ変更し、スマートフォン・タブレット・PCで利用しやすいレイアウトになっています。
コメント