閉じるボタンで閉じられるドロワーメニューの作り方
閉じるボタンで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、メニュー内に配置した「閉じる」ボタンをクリックすると画面外へ戻ります。開く操作と閉じる操作が分かれているため、利用者が自分のタイミングでメニューを操作できます。
スマートフォン向けのナビゲーション、会員サイトのメニュー、管理画面のサイドメニュー、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="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_drawer"
data-close-button-drawer-menu="">
<!-- メニュー見出し -->
<div class="close-button-drawer-menu_heading">
メニュー
</div>
<!-- ナビゲーション -->
<nav class="close-button-drawer-menu_nav">
<!-- メニューリンク -->
<a class="close-button-drawer-menu_link" href="#">
ホーム
</a>
<!-- メニューリンク -->
<a class="close-button-drawer-menu_link" href="#">
サービス
</a>
<!-- メニューリンク -->
<a class="close-button-drawer-menu_link" href="#">
お知らせ
</a>
<!-- メニューリンク -->
<a class="close-button-drawer-menu_link" href="#">
お問い合わせ
</a>
</nav>
<!-- 閉じるボタン -->
<button
class="close-button-drawer-menu_close"
type="button"
data-close-button-drawer-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。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ではモーダル全体の横幅、余白、背景色、文字サイズ、角丸、影、背景オーバーレイの色、ボタンの色やサイズを変更できます。デザインを変更することでサイト全体の雰囲気に合わせたモーダルへ調整できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると広く、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広くなり、小さくすると詰まった表示になります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がります。
padding:28px;
モーダル内部の余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 20px 40px ...
モーダルに付ける影です。20pxや40pxを変更すると影の広がりや立体感が変わります。
padding:10px 20px;
「閉じる」ボタンの内側余白です。値を変更するとボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に合わせてモーダルが縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント