ドロワーメニューを画面中央で拡大表示する方法
ドロワーメニューを画面中央で拡大表示する方法を紹介します。通常の左右から表示されるドロワーメニューとは異なり、ボタンをクリックすると画面中央へズームしながら表示されるため、メニューやナビゲーションを印象的に見せたい場面で利用できます。HTML・CSS・JavaScriptのみで実装できるため、ライブラリを使用せずに導入できます。
このサンプルでは、メニューを開くボタン、背景のオーバーレイ、ズーム表示されるメニュー本体、ナビゲーションリンク、閉じるボタンを実装しています。背景部分または閉じるボタンをクリックするとメニューを閉じることができ、基本的な操作を確認できます。
メニュー項目やタイトル、説明文、色や余白、角丸、表示サイズなどは自由に変更できます。サイトメニューやサービス一覧、キャンペーン案内など、画面中央へ注目させたいUIを作成する際のベースとして利用できるサンプルです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本記事のコードを利用したことによる損害について、当サイトでは責任を負いかねます。必要に応じて環境に合わせて調整してください。
デモ
「メニューを開く」をクリックすると、画面中央へズームしながらドロワーメニューが表示されます。背景部分または「閉じる」ボタンをクリックするとメニューを閉じます。
コードをコピーして使おう！
<!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="center-zoom-drawer-menu_wrap">
<!-- タイトル -->
<div class="center-zoom-drawer-menu_title">
ドロワーメニューを画面中央で拡大表示
</div>
<!-- 説明文 -->
<p class="center-zoom-drawer-menu_text">
ボタンをクリックすると、画面中央へズームしながらドロワーメニューを表示できます。
</p>
<!-- メニューを開くボタン -->
<button
class="center-zoom-drawer-menu_open"
type="button"
data-drawer-open>
メニューを開く
</button>
</div>
<!-- オーバーレイ -->
<div
class="center-zoom-drawer-menu_overlay"
data-drawer-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<div
class="center-zoom-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="center-zoom-drawer-menu-title">
<!-- メニュータイトル -->
<div
class="center-zoom-drawer-menu_drawer-title"
id="center-zoom-drawer-menu-title">
メニュー
</div>
<!-- 説明文 -->
<p class="center-zoom-drawer-menu_drawer-text">
画面中央へ拡大表示されるドロワーメニューです。
</p>
<!-- メニュー一覧 -->
<nav
class="center-zoom-drawer-menu_nav"
aria-label="メニュー">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お知らせ</a>
<a href="#">お問い合わせ</a>
</nav>
<!-- 閉じるボタン -->
<button
class="center-zoom-drawer-menu_close"
type="button"
data-drawer-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* =========================================
共通設定
========================================= */
/* 全要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* 幅と高さに余白と枠線を含める */
}
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ボタン */
button{
font:inherit; /* ページと同じフォントを使用 */
}
/* =========================================
案内エリア
========================================= */
/* 案内エリア全体 */
.center-zoom-drawer-menu_wrap{
width:100%; /* 画面幅に合わせて表示 */
max-width:700px; /* 最大横幅。値を大きくすると案内エリアが広がる */
margin:40px auto; /* 上下40px・左右中央配置 */
padding:32px; /* 内側余白。値を大きくすると余白が広がる */
border:1px solid #e5e7eb; /* 枠線 */
border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 背景色 */
text-align:center; /* 中央揃え */
}
/* タイトル */
.center-zoom-drawer-menu_title{
margin:0 0 12px; /* 下側余白 */
color:#111827; /* 文字色 */
font-size:22px; /* 文字サイズ */
font-weight:700; /* 太字 */
line-height:1.5; /* 行間 */
}
/* 説明文 */
.center-zoom-drawer-menu_text{
margin:0 0 24px; /* 下側余白 */
color:#4b5563; /* 文字色 */
font-size:16px; /* 文字サイズ */
line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}
/* メニューを開くボタン */
.center-zoom-drawer-menu_open{
min-height:48px; /* タップしやすい高さ */
padding:12px 24px; /* 内側余白 */
border:none; /* 枠線を削除 */
border-radius:8px; /* 角丸 */
background:#2563eb; /* 背景色 */
color:#ffffff; /* 文字色 */
font-size:16px; /* 文字サイズ */
font-weight:700; /* 太字 */
cursor:pointer; /* 指カーソル */
transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅く、小さくすると速くなる */
}
/* 開くボタンへマウスを重ねた時 */
.center-zoom-drawer-menu_open:hover{
background:#1d4ed8; /* ホバー時の背景色 */
}
/* =========================================
オーバーレイ
========================================= */
/* 背景 */
.center-zoom-drawer-menu_overlay{
display:none; /* 初期状態では非表示 */
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右いっぱいに表示 */
z-index:9999; /* 最前面へ表示 */
align-items:center; /* 縦中央 */
justify-content:center; /* 横中央 */
padding:20px; /* 画面端との余白 */
background:rgba(0,0,0,.5); /* 背景色。.5を大きくすると暗く、小さくすると薄くなる */
}
/* 表示状態 */
.center-zoom-drawer-menu_overlay.is-active{
display:flex; /* 表示 */
}
/* =========================================
ドロワーメニュー
========================================= */
/* ドロワーメニュー本体 */
.center-zoom-drawer-menu_drawer{
width:100%; /* 横幅いっぱい */
max-width:420px; /* 最大横幅。値を大きくするとメニューが広がる */
padding:28px; /* 内側余白 */
border-radius:18px; /* 角丸 */
background:#ffffff; /* 背景色 */
box-shadow:0 20px 40px rgba(0,0,0,.2); /* 影 */
animation:center-zoom-drawer-menu_zoom .35s ease forwards; /* 0.35秒で拡大表示。値を大きくすると遅く、小さくすると速くなる */
}
/* メニュータイトル */
.center-zoom-drawer-menu_drawer-title{
margin:0 0 16px; /* 下側余白 */
color:#111827; /* 文字色 */
font-size:22px; /* 文字サイズ */
font-weight:700; /* 太字 */
line-height:1.5; /* 行間 */
}
/* メニュー説明 */
.center-zoom-drawer-menu_drawer-text{
margin:0 0 20px; /* 下側余白 */
color:#4b5563; /* 文字色 */
font-size:16px; /* 文字サイズ */
line-height:1.8; /* 行間 */
}
/* メニュー一覧 */
.center-zoom-drawer-menu_nav{
display:grid; /* 縦並び */
gap:12px; /* 各項目の間隔 */
margin-bottom:24px; /* 下側余白 */
}
/* メニューリンク */
.center-zoom-drawer-menu_nav a{
display:block; /* 横幅いっぱい */
padding:12px 14px; /* 内側余白 */
border-radius:8px; /* 角丸 */
background:#f3f4f6; /* 背景色 */
color:#111827; /* 文字色 */
text-decoration:none; /* 下線を削除 */
font-weight:700; /* 太字 */
transition:background .2s ease; /* 0.2秒で背景色を変化 */
}
/* メニューリンクへマウスを重ねた時 */
.center-zoom-drawer-menu_nav a:hover{
background:#e5e7eb; /* ホバー時の背景色 */
}
/* 閉じるボタン */
.center-zoom-drawer-menu_close{
width:100%; /* 横幅いっぱい */
min-height:48px; /* タップしやすい高さ */
padding:12px; /* 内側余白 */
border:none; /* 枠線を削除 */
border-radius:8px; /* 角丸 */
background:#111827; /* 背景色 */
color:#ffffff; /* 文字色 */
font-size:16px; /* 文字サイズ */
font-weight:700; /* 太字 */
cursor:pointer; /* 指カーソル */
transition:background .2s ease; /* 0.2秒で背景色を変化 */
}
/* 閉じるボタンへマウスを重ねた時 */
.center-zoom-drawer-menu_close:hover{
background:#374151; /* ホバー時の背景色 */
}
/* =========================================
拡大表示アニメーション
========================================= */
@keyframes center-zoom-drawer-menu_zoom{
/* 開始時 */
from{
opacity:0; /* 透明 */
transform:scale(.8); /* 80%サイズから開始 */
}
/* 終了時 */
to{
opacity:1; /* 完全表示 */
transform:scale(1); /* 元のサイズ */
}
}
/* =========================================
スマートフォン対応
========================================= */
@media screen and (max-width:640px){
/* ページ全体 */
body{
padding:24px 12px; /* ページ余白を縮小 */
}
/* 案内エリア */
.center-zoom-drawer-menu_wrap{
margin:24px auto; /* 上下余白を縮小 */
padding:24px 18px; /* 内側余白を縮小 */
}
/* ドロワーメニュー */
.center-zoom-drawer-menu_drawer{
padding:22px 18px; /* 内側余白を縮小 */
}
}
// メニューを開くボタンを取得
const centerZoomDrawerMenuOpen=document.querySelector(
"[data-drawer-open]"
);
// オーバーレイを取得
const centerZoomDrawerMenuOverlay=document.querySelector(
"[data-drawer-overlay]"
);
// 閉じるボタンを取得
const centerZoomDrawerMenuClose=document.querySelector(
"[data-drawer-close]"
);
// メニューを開くボタンをクリックした時
centerZoomDrawerMenuOpen.addEventListener("click",function(){
// ドロワーメニューを表示
centerZoomDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューが表示中であることを支援技術へ伝える
centerZoomDrawerMenuOverlay.setAttribute(
"aria-hidden",
"false"
);
});
// 閉じるボタンをクリックした時
centerZoomDrawerMenuClose.addEventListener("click",function(){
// ドロワーメニューを非表示
centerZoomDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューが非表示であることを支援技術へ伝える
centerZoomDrawerMenuOverlay.setAttribute(
"aria-hidden",
"true"
);
});
// 背景部分をクリックした時
centerZoomDrawerMenuOverlay.addEventListener("click",function(event){
// 背景をクリックした場合のみ閉じる
if(event.target===centerZoomDrawerMenuOverlay){
// ドロワーメニューを非表示
centerZoomDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューが非表示であることを支援技術へ伝える
centerZoomDrawerMenuOverlay.setAttribute(
"aria-hidden",
"true"
);
}
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ボタンをクリックすると画面中央へズームしながらドロワーメニューを表示できます。HTMLでメニュー構造を作成し、CSSでズームアニメーションを含むデザインを設定、JavaScriptでメニューの開閉を制御しています。
ドロワーメニュー内にはメニューリンクと閉じるボタンを配置しています。背景部分または閉じるボタンをクリックするとメニューを閉じられるため、スマートフォン・タブレット・PCのどの環境でも操作しやすい構成です。
HTML・CSS・JavaScriptを分離しているため、メニュー項目の追加や削除、配色変更、アニメーション速度の調整なども簡単に行えます。画面中央へ拡大表示するメニューUIを作成したい場合のベースとして利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
ドロワーメニュー本体、メニュー一覧、開くボタン、閉じるボタンを配置しています。タイトルや説明文、リンク名、メニュー数などを変更できます。
style.css
ドロワーメニュー全体のレイアウトやデザインを設定しています。背景色、文字色、影、角丸、余白、メニューの横幅、ズームアニメーションなどを変更できます。
script.js
ドロワーメニューを開く処理、閉じる処理、背景クリックで閉じる処理を管理しています。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開いてください。「メニューを開く」ボタンをクリックすると画面中央へズームしながらドロワーメニューが表示されます。「閉じる」ボタンまたは背景部分をクリックするとメニューを閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、メニュー項目、リンク先、ボタンの文字を変更できます。style.cssでは背景色、文字色、余白、角丸、影、メニューの横幅、ボタンデザイン、アニメーションなどを変更できます。script.jsでは開閉処理やクリック時の動作を変更できます。
数値調整
style.cssのmax-width:420px;を変更するとドロワーメニューの最大横幅が変わります。padding:28px;を変更すると内部余白が変わります。border-radius:18px;を変更すると角丸の大きさが変わります。animation:center-zoom-drawer-menu_zoom .35s ease forwards;の0.35秒を変更するとズーム表示の速度が変わります。transition:background .2s ease;の0.2秒を変更するとボタンやリンクの背景色が切り替わる速度が変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンでは余白やメニューサイズを自動調整し、タブレット・PCでは中央配置を維持したまま利用できます。
コメント