背景を暗くしないドロワーメニューの作り方
背景を暗くしないドロワーメニューの作り方を紹介します。一般的なドロワーメニューは表示時に半透明のオーバーレイで画面全体を暗くしますが、このサンプルでは背景を暗くせずにメニューだけを表示できます。画面全体を隠したくない場合や、コンテンツを見せたままメニューを利用したい場面に適しています。
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-without-overlay_wrap">
<!-- 操作エリアのタイトル -->
<div class="drawer-menu-without-overlay_title">
背景を暗くしないドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="drawer-menu-without-overlay_text">
ドロワーメニューを開いても背景は暗くならず、ページの内容をそのまま確認できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="drawer-menu-without-overlay_open"
type="button"
data-drawer-menu-without-overlay-open>
メニューを開く
</button>
</main>
<!-- 背景を暗くしないドロワーメニュー本体 -->
<aside
class="drawer-menu-without-overlay_drawer"
data-drawer-menu-without-overlay-drawer
aria-hidden="true">
<!-- ドロワーメニュー上部 -->
<div class="drawer-menu-without-overlay_header">
<!-- ドロワーメニューのタイトル -->
<div class="drawer-menu-without-overlay_heading">
MENU
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="drawer-menu-without-overlay_close"
type="button"
data-drawer-menu-without-overlay-close
aria-label="閉じる">
<span class="drawer-menu-without-overlay_close-line drawer-menu-without-overlay_close-line-first"></span>
<span class="drawer-menu-without-overlay_close-line drawer-menu-without-overlay_close-line-second"></span>
</button>
</div>
<!-- ナビゲーションメニュー -->
<nav
class="drawer-menu-without-overlay_nav"
aria-label="メインメニュー">
<!-- ホームへのリンク -->
<a
class="drawer-menu-without-overlay_link"
href="#home"
data-drawer-menu-without-overlay-link>
ホーム
</a>
<!-- サービスへのリンク -->
<a
class="drawer-menu-without-overlay_link"
href="#service"
data-drawer-menu-without-overlay-link>
サービス
</a>
<!-- お知らせへのリンク -->
<a
class="drawer-menu-without-overlay_link"
href="#news"
data-drawer-menu-without-overlay-link>
お知らせ
</a>
<!-- お問い合わせへのリンク -->
<a
class="drawer-menu-without-overlay_link"
href="#contact"
data-drawer-menu-without-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:#0f172a; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ドロワーメニューを開く操作エリア */
.drawer-menu-without-overlay_wrap{
width:100%; /* 画面幅に合わせて縮小する */
max-width:760px; /* 操作エリアの最大横幅 */
min-height:420px; /* 操作エリアの最低高さ */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:48px 24px; /* 上下48px・左右24pxの内側余白 */
border:1px solid #e5e7eb; /* 操作エリアの枠線 */
border-radius:20px; /* 操作エリアの角丸 */
background:#ffffff; /* 操作エリアの背景色 */
text-align:center; /* 内容を中央揃え */
}
/* 操作エリアのタイトル */
.drawer-menu-without-overlay_title{
margin:0 0 18px; /* 下側18pxの余白 */
color:#0f172a; /* タイトルの文字色 */
font-size:34px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.drawer-menu-without-overlay_text{
margin:0 0 30px; /* 下側30pxの余白 */
color:#475569; /* 説明文の文字色 */
font-size:18px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* ドロワーメニューを開くボタン */
.drawer-menu-without-overlay_open{
padding:16px 42px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:12px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:20px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 背景を暗くしないドロワーメニュー本体 */
.drawer-menu-without-overlay_drawer{
position:fixed; /* 画面左側へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 他の要素より前面へ表示 */
width:320px; /* ドロワーメニューの横幅 */
max-width:85%; /* 画面幅の85%を超えないようにする */
height:100vh; /* 画面の高さ全体へ広げる */
padding:26px; /* ドロワーメニュー内側の余白 */
border-right:1px solid #e5e7eb; /* 右側の枠線 */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:8px 0 24px rgba(15,23,42,.12); /* 右側へ表示する影 */
transform:translateX(calc(-100% - 40px)); /* 影も含めて画面左外へ隠す */
transition:transform .3s ease; /* 0.3秒でドロワーメニューを開閉する */
overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
}
/* ドロワーメニューの表示状態 */
.drawer-menu-without-overlay_drawer.is-active{
transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}
/* ドロワーメニュー上部 */
.drawer-menu-without-overlay_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
margin-bottom:28px; /* 下側28pxの余白 */
}
/* ドロワーメニューのタイトル */
.drawer-menu-without-overlay_heading{
margin:0; /* 外側余白をなくす */
color:#0f172a; /* タイトルの文字色 */
font-size:32px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューを閉じるボタン */
.drawer-menu-without-overlay_close{
position:relative; /* ×印を配置する基準 */
flex-shrink:0; /* ボタンが縮まないようにする */
width:42px; /* ボタンの横幅 */
height:42px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:1px solid #cbd5e1; /* ボタンの枠線 */
border-radius:10px; /* ボタンの角丸 */
background:#f8fafc; /* ボタンの背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:
background .2s,
border-color .2s; /* 0.2秒で背景色と枠線色を切り替える */
}
/* 閉じるボタンの線 */
.drawer-menu-without-overlay_close-line{
position:absolute; /* ボタン中央へ配置 */
top:50%; /* ボタン上端から50%の位置 */
left:50%; /* ボタン左端から50%の位置 */
width:20px; /* ×印を構成する線の長さ */
height:2px; /* ×印を構成する線の太さ */
border-radius:2px; /* 線の角を丸くする */
background:#0f172a; /* ×印の色 */
transition:background .2s; /* 0.2秒で線の色を切り替える */
}
/* ×印の1本目 */
.drawer-menu-without-overlay_close-line-first{
transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}
/* ×印の2本目 */
.drawer-menu-without-overlay_close-line-second{
transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}
/* 閉じるボタンへマウスを重ねた状態 */
.drawer-menu-without-overlay_close:hover{
border-color:#2563eb; /* 枠線を青色へ変更 */
background:#2563eb; /* 背景色を青色へ変更 */
}
/* 閉じるボタンへマウスを重ねた時の線 */
.drawer-menu-without-overlay_close:hover
.drawer-menu-without-overlay_close-line{
background:#ffffff; /* ×印を白色へ変更 */
}
/* ナビゲーションメニュー */
.drawer-menu-without-overlay_nav{
display:flex; /* メニュー項目を並べる */
flex-direction:column; /* メニュー項目を縦並びにする */
gap:12px; /* メニュー項目同士の間隔 */
}
/* ナビゲーションリンク */
.drawer-menu-without-overlay_link{
display:block; /* リンク全体をクリック可能にする */
padding:16px 18px; /* リンク内側の上下・左右余白 */
border-radius:12px; /* リンクの角丸 */
background:#f8fafc; /* リンクの背景色 */
color:#0f172a; /* リンクの文字色 */
font-size:18px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-decoration:none; /* リンクの下線を非表示 */
transition:
background .2s,
color .2s; /* 0.2秒で背景色と文字色を切り替える */
}
/* ナビゲーションリンクへマウスを重ねた状態 */
.drawer-menu-without-overlay_link:hover{
background:#2563eb; /* 背景色を青色へ変更 */
color:#ffffff; /* 文字色を白色へ変更 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.drawer-menu-without-overlay_wrap{
min-height:360px; /* 操作エリアの最低高さを縮小 */
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:36px 18px; /* 上下36px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のタイトル */
.drawer-menu-without-overlay_title{
font-size:26px; /* タイトルの文字サイズを縮小 */
}
/* スマートフォン用の説明文 */
.drawer-menu-without-overlay_text{
font-size:16px; /* 説明文の文字サイズを縮小 */
}
/* スマートフォン用のドロワーメニュー */
.drawer-menu-without-overlay_drawer{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
}
// ドロワーメニューを開くボタンを取得
const drawerMenuWithoutOverlayOpen=document.querySelector(
"[data-drawer-menu-without-overlay-open]"
);
// ドロワーメニューを閉じるボタンを取得
const drawerMenuWithoutOverlayClose=document.querySelector(
"[data-drawer-menu-without-overlay-close]"
);
// ドロワーメニュー本体を取得
const drawerMenuWithoutOverlayDrawer=document.querySelector(
"[data-drawer-menu-without-overlay-drawer]"
);
// ドロワーメニュー内のリンクをすべて取得
const drawerMenuWithoutOverlayLinks=document.querySelectorAll(
"[data-drawer-menu-without-overlay-link]"
);
// ドロワーメニューを開く共通処理
function openDrawerMenuWithoutOverlay(){
// ドロワーメニューへ表示用クラスを追加
drawerMenuWithoutOverlayDrawer.classList.add("is-active");
// ドロワーメニューが表示中であることを設定
drawerMenuWithoutOverlayDrawer.setAttribute("aria-hidden","false");
}
// ドロワーメニューを閉じる共通処理
function closeDrawerMenuWithoutOverlay(){
// ドロワーメニューから表示用クラスを削除
drawerMenuWithoutOverlayDrawer.classList.remove("is-active");
// ドロワーメニューが非表示であることを設定
drawerMenuWithoutOverlayDrawer.setAttribute("aria-hidden","true");
}
// 開くボタンをクリックした時
drawerMenuWithoutOverlayOpen.addEventListener("click",function(){
// ドロワーメニューを開く
openDrawerMenuWithoutOverlay();
});
// 閉じるボタンをクリックした時
drawerMenuWithoutOverlayClose.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeDrawerMenuWithoutOverlay();
});
// 各メニューリンクへクリック処理を設定
drawerMenuWithoutOverlayLinks.forEach(function(link){
// メニューリンクをクリックした時
link.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeDrawerMenuWithoutOverlay();
});
});
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成された、背景を暗くしないドロワーメニューです。ボタンをクリックすると画面左側からドロワーメニューが表示されますが、背景にはオーバーレイを表示しないため、ページ全体を見たまま操作できます。
レイアウトはHTML、デザインはCSS、開閉処理はJavaScriptで分けているため、見た目や動作を個別に編集しやすい構成です。初めてドロワーメニューを作る方でも、それぞれの役割を理解しながらカスタマイズできます。
配布しているコードだけでそのまま動作するため、追加ライブラリや外部ファイルは必要ありません。ブラウザで開くだけで動作確認できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
ドロワーメニュー本体、開くボタン、閉じるボタン、メニュー項目を配置しています。メニュー項目や表示する文字を変更できます。
style.css
ドロワーメニューの幅、背景色、余白、影、ボタン、閉じるボタン、アニメーションなど見た目全体を設定しています。
script.js
ドロワーメニューの開閉処理と、メニュークリック時に閉じる処理を実装しています。
設置方法・使い方
sampleフォルダをそのまま配置します。
index.htmlをブラウザで開くとサンプルが動作します。
「メニューを開く」をクリックすると左側からドロワーメニューが表示されます。閉じるボタンまたはメニュー項目をクリックすると閉じます。
カスタマイズできる内容
index.htmlではメニュー項目やリンク先、タイトル、ボタンの文章を変更できます。
style.cssではドロワーメニューの幅、背景色、文字色、余白、角丸、影、ボタンデザイン、閉じるボタンのデザインを変更できます。
script.jsでは開閉処理や閉じるタイミングを自由に変更できます。
数値調整
style.cssの「width:320px;」を変更するとドロワーメニューの横幅が変わります。
style.cssの「transition:.3s;」は開閉アニメーション時間です。値を大きくするとゆっくり、小さくすると素早く開閉します。
style.cssの「padding」や「border-radius」を変更すると余白や角丸の大きさを調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応しています。
style.cssのmedia queryでスマートフォン向けの余白や文字サイズを調整しています。
また、「max-width:85%;」により画面幅に合わせてドロワーメニューの横幅が自動調整されます。PC・タブレット・スマートフォンで利用できます。
コメント