背景を暗く表示するドロワーメニューの作り方
背景を暗く表示するドロワーメニューの作り方を紹介します。ドロワーメニューを開いたときに画面全体へ半透明の背景を重ねることで、メニューを目立たせながら現在の操作対象を分かりやすくできるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、ライブラリを使わずに導入できます。
背景を暗くすることで、ユーザーの視線をドロワーメニューへ自然に誘導でき、ナビゲーションや設定画面などの操作性を向上できます。また、背景部分をクリックするとドロワーメニューを閉じられるため、スマートフォンでも直感的に利用できます。
本記事では、ドロワーメニュー本体と背景オーバーレイを連動させ、開閉時に自然な表示になるサンプルコードを紹介します。メニュー項目や色、横幅、背景の暗さなども自由に変更できるので、自分のサイトデザインに合わせて簡単にカスタマイズできます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
掲載しているコードによって発生した損害については責任を負いかねます。ご自身の判断でご利用ください。
デモ
背景を暗く表示するドロワーメニュー
ボタンを押すと背景が暗くなり、ドロワーメニューが表示されます。
「メニューを開く」をクリックすると背景が暗くなり、ドロワーメニューが表示されます。背景部分または「×」をクリックすると閉じる動作を確認できます。
コードをコピーして使おう！
<!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>
<!-- ドロワーメニューを開く操作エリア -->
<main class="drawer-menu-dark-overlay_wrap">
<!-- 操作エリアのタイトル -->
<div class="drawer-menu-dark-overlay_title">
背景を暗く表示するドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="drawer-menu-dark-overlay_text">
「メニューを開く」をクリックすると、背景を暗くしてドロワーメニューを表示します。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="drawer-menu-dark-overlay_open"
type="button"
data-drawer-menu-dark-overlay-open>
メニューを開く
</button>
</main>
<!-- ドロワーメニュー表示中の暗い背景 -->
<div
class="drawer-menu-dark-overlay_overlay"
data-drawer-menu-dark-overlay-overlay>
</div>
<!-- ドロワーメニュー本体 -->
<aside
class="drawer-menu-dark-overlay_drawer"
data-drawer-menu-dark-overlay-drawer
aria-hidden="true">
<!-- ドロワーメニュー上部 -->
<div class="drawer-menu-dark-overlay_header">
<!-- ドロワーメニューのタイトル -->
<div class="drawer-menu-dark-overlay_heading">
メニュー
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="drawer-menu-dark-overlay_close"
type="button"
data-drawer-menu-dark-overlay-close
aria-label="閉じる">
</button>
</div>
<!-- ナビゲーションメニュー -->
<nav
class="drawer-menu-dark-overlay_nav"
aria-label="メインメニュー">
<a
class="drawer-menu-dark-overlay_link"
href="#home"
data-drawer-menu-dark-overlay-link>
ホーム
</a>
<a
class="drawer-menu-dark-overlay_link"
href="#service"
data-drawer-menu-dark-overlay-link>
サービス
</a>
<a
class="drawer-menu-dark-overlay_link"
href="#news"
data-drawer-menu-dark-overlay-link>
お知らせ
</a>
<a
class="drawer-menu-dark-overlay_link"
href="#contact"
data-drawer-menu-dark-overlay-link>
お問い合わせ
</a>
</nav>
</aside>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* すべての要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}
/* ページ全体 */
body{
margin:0; /* ページ外側の余白をなくす */
padding:40px 20px; /* 上下40px・左右20pxの余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ドロワーメニューを開く操作エリア */
.drawer-menu-dark-overlay_wrap{
width:100%; /* 画面幅に合わせて縮小する */
max-width:700px; /* 操作エリアの最大横幅 */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 操作エリア内側の余白 */
border:1px solid #e5e7eb; /* 操作エリアの枠線 */
border-radius:18px; /* 操作エリアの角丸 */
background:#f8fafc; /* 操作エリアの背景色 */
text-align:center; /* 内容を中央揃え */
}
/* 操作エリアのタイトル */
.drawer-menu-dark-overlay_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.drawer-menu-dark-overlay_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* ドロワーメニューを開くボタン */
.drawer-menu-dark-overlay_open{
padding:12px 26px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* ドロワーメニュー表示中の暗い背景 */
.drawer-menu-dark-overlay_overlay{
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9998; /* ドロワーメニューより背面へ表示 */
background:rgba(15,23,42,.6); /* 0.6を大きくすると背景が暗くなる */
opacity:0; /* 初期状態では透明 */
visibility:hidden; /* 初期状態では操作できないようにする */
transition:
opacity .3s,
visibility .3s; /* 0.3秒で背景を表示・非表示にする */
}
/* 暗い背景の表示状態 */
.drawer-menu-dark-overlay_overlay.is-active{
opacity:1; /* 暗い背景を表示 */
visibility:visible; /* 暗い背景を操作可能にする */
}
/* ドロワーメニュー本体 */
.drawer-menu-dark-overlay_drawer{
position:fixed; /* 画面左側へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 暗い背景より前面へ表示 */
width:320px; /* ドロワーメニューの横幅 */
max-width:85%; /* 画面幅の85%を超えないようにする */
height:100vh; /* 画面の高さいっぱいへ広げる */
padding:28px 24px; /* 上下28px・左右24pxの内側余白 */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ表示する影 */
transform:translateX(calc(-100% - 40px)); /* 画面左外へ隠す */
transition:transform .35s ease; /* 0.35秒で左側から開閉する */
overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
}
/* ドロワーメニューの表示状態 */
.drawer-menu-dark-overlay_drawer.is-active{
transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}
/* ドロワーメニュー上部 */
.drawer-menu-dark-overlay_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
margin-bottom:28px; /* 下側28pxの余白 */
}
/* ドロワーメニューのタイトル */
.drawer-menu-dark-overlay_heading{
margin:0; /* 外側余白をなくす */
color:#111827; /* タイトルの文字色 */
font-size:26px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューを閉じるボタン */
.drawer-menu-dark-overlay_close{
position:relative; /* ×印を配置する基準 */
flex-shrink:0; /* ボタンが縮まないようにする */
width:42px; /* ボタンの横幅 */
height:42px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:1px solid #cbd5e1; /* ボタンの枠線 */
border-radius:10px; /* ボタンの角丸 */
background:#f8fafc; /* ボタンの背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 閉じるボタンの2本の線 */
.drawer-menu-dark-overlay_close::before,
.drawer-menu-dark-overlay_close::after{
content:""; /* 擬似要素を表示 */
position:absolute; /* ボタン中央へ配置 */
top:50%; /* 上端から50%の位置 */
left:50%; /* 左端から50%の位置 */
width:20px; /* 線の長さ */
height:2px; /* 線の太さ */
border-radius:2px; /* 線の角を丸くする */
background:#111827; /* ×印の色 */
}
/* ×印の1本目 */
.drawer-menu-dark-overlay_close::before{
transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}
/* ×印の2本目 */
.drawer-menu-dark-overlay_close::after{
transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}
/* ナビゲーションメニュー */
.drawer-menu-dark-overlay_nav{
display:flex; /* メニュー項目を並べる */
flex-direction:column; /* メニュー項目を縦並びにする */
gap:12px; /* メニュー項目同士の間隔 */
}
/* ナビゲーションリンク */
.drawer-menu-dark-overlay_link{
display:block; /* リンク全体をクリック可能にする */
padding:16px 18px; /* リンク内側の上下・左右余白 */
border-radius:10px; /* リンクの角丸 */
background:#f1f5f9; /* リンクの背景色 */
color:#111827; /* リンクの文字色 */
font-size:17px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-decoration:none; /* リンクの下線を非表示 */
}
/* ナビゲーションリンクへマウスを重ねた状態 */
.drawer-menu-dark-overlay_link:hover{
background:#dbeafe; /* マウスを重ねた時の背景色 */
color:#1d4ed8; /* マウスを重ねた時の文字色 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.drawer-menu-dark-overlay_wrap{
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のドロワーメニュー */
.drawer-menu-dark-overlay_drawer{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
}
// ドロワーメニューを開くボタンを取得
const drawerMenuDarkOverlayOpen=document.querySelector(
"[data-drawer-menu-dark-overlay-open]"
);
// ドロワーメニューを閉じるボタンを取得
const drawerMenuDarkOverlayClose=document.querySelector(
"[data-drawer-menu-dark-overlay-close]"
);
// ドロワーメニュー表示中の暗い背景を取得
const drawerMenuDarkOverlayBackground=document.querySelector(
"[data-drawer-menu-dark-overlay-overlay]"
);
// ドロワーメニュー本体を取得
const drawerMenuDarkOverlayDrawer=document.querySelector(
"[data-drawer-menu-dark-overlay-drawer]"
);
// ドロワーメニュー内のリンクをすべて取得
const drawerMenuDarkOverlayLinks=document.querySelectorAll(
"[data-drawer-menu-dark-overlay-link]"
);
// ドロワーメニューを開く共通処理
function openDrawerMenuDarkOverlay(){
// 暗い背景へ表示用クラスを追加
drawerMenuDarkOverlayBackground.classList.add("is-active");
// ドロワーメニューへ表示用クラスを追加
drawerMenuDarkOverlayDrawer.classList.add("is-active");
// ドロワーメニューを表示状態へ変更
drawerMenuDarkOverlayDrawer.setAttribute("aria-hidden","false");
}
// ドロワーメニューを閉じる共通処理
function closeDrawerMenuDarkOverlay(){
// 暗い背景から表示用クラスを削除
drawerMenuDarkOverlayBackground.classList.remove("is-active");
// ドロワーメニューから表示用クラスを削除
drawerMenuDarkOverlayDrawer.classList.remove("is-active");
// ドロワーメニューを非表示状態へ変更
drawerMenuDarkOverlayDrawer.setAttribute("aria-hidden","true");
}
// 開くボタンをクリックした時
drawerMenuDarkOverlayOpen.addEventListener("click",function(){
// ドロワーメニューを開く
openDrawerMenuDarkOverlay();
});
// 閉じるボタンをクリックした時
drawerMenuDarkOverlayClose.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeDrawerMenuDarkOverlay();
});
// 暗い背景をクリックした時
drawerMenuDarkOverlayBackground.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeDrawerMenuDarkOverlay();
});
// 各メニューリンクへクリック処理を設定
drawerMenuDarkOverlayLinks.forEach(function(link){
// メニューリンクをクリックした時
link.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeDrawerMenuDarkOverlay();
});
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
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では操作エリアの横幅や余白、背景色、ドロワーメニューの横幅、内側余白、背景色、影、ナビゲーション項目の色や角丸などを変更できます。background:rgba(15,23,42,.6);の色と透明度を変更すると、メニュー表示中に画面を覆う背景の見え方を調整できます。また、transitionの時間を変更すると、オーバーレイとドロワーメニューの表示速度を調整できます。
数値調整
style.css
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
操作エリアのタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 26px;
「メニューを開く」ボタンの内側余白です。12pxで上下、26pxで左右の余白を調整できます。
background:rgba(15,23,42,.6);
ドロワーメニュー表示中に画面を覆う背景の色と透明度です。最後の.6を大きくすると背景が暗くなり、小さくすると元の画面が見えやすくなります。
transition:opacity .3s, visibility .3s;
暗い背景を表示・非表示にする時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
width:320px;
ドロワーメニューの横幅です。値を大きくするとメニューが横に広がり、小さくすると狭くなります。max-width:85%;により、画面幅の85%を超えないようにしています。
padding:28px 24px;
ドロワーメニューの内側余白です。28pxで上下、24pxで左右の余白を調整できます。
box-shadow:12px 0 30px rgba(15,23,42,.18);
ドロワーメニュー右側の影です。12pxで横方向の位置、30pxでぼかしの広がりを調整できます。
transform:translateX(calc(-100% - 40px));
閉じているときにドロワーメニューを画面左外へ移動する距離です。メニュー自身の横幅に加えて40px左へ移動させています。
transition:transform .35s ease;
ドロワーメニューが開閉する時間です。.35sを大きくするとゆっくり動き、小さくすると速く動きます。
gap:12px;
ナビゲーション項目同士の間隔です。値を大きくすると項目同士が離れ、小さくすると近くなります。
padding:16px 18px;
ナビゲーションリンクの内側余白です。16pxで上下、18pxで左右の余白を調整できます。
border-radius:10px;
ナビゲーションリンクの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの操作エリアへwidth:100%;とmax-width:700px;を指定し、画面幅に合わせて縮小できるようにしています。ドロワーメニューにはwidth:320px;とmax-width:85%;を指定しているため、画面幅が狭い場合はドロワーメニューが画面の85%を超えないように縮小されます。また、640px以下ではページ、操作エリア、ドロワーメニューの余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント