全画面ドロワーメニューの作り方
全画面ドロワーメニューの作り方を紹介します。画面全体を覆うメニューを表示できるため、スマートフォン向けナビゲーションやランディングページ、ポートフォリオサイトなどで視認性の高いメニューを実装したい場合に便利です。
このサンプルでは、ボタンをクリックすると全画面のドロワーメニューが表示され、メニュー項目の選択や閉じるボタンで元の画面へ戻れるシンプルな構成になっています。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>
<!-- 全画面ドロワーメニューを開く操作エリア -->
<div class="fullscreen-drawer-menu_wrap">
<!-- 操作エリアのタイトル -->
<div class="fullscreen-drawer-menu_title">
全画面ドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="fullscreen-drawer-menu_text">
ボタンを押すと左側から画面全体を覆うドロワーメニューが表示されます。
</p>
<!-- 全画面ドロワーメニューを開くボタン -->
<button
class="fullscreen-drawer-menu_open"
type="button"
data-fullscreen-drawer-menu-open>
メニューを開く
</button>
</div>
<!-- ドロワーメニュー表示中の背景 -->
<div
class="fullscreen-drawer-menu_overlay"
data-fullscreen-drawer-menu-overlay>
</div>
<!-- 全画面ドロワーメニュー本体 -->
<aside
class="fullscreen-drawer-menu_drawer"
data-fullscreen-drawer-menu-drawer
aria-hidden="true">
<!-- ドロワーメニュー上部 -->
<div class="fullscreen-drawer-menu_header">
<!-- ドロワーメニューのタイトル -->
<div class="fullscreen-drawer-menu_heading">
MENU
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="fullscreen-drawer-menu_close"
type="button"
data-fullscreen-drawer-menu-close
aria-label="閉じる">
×
</button>
</div>
<!-- ナビゲーションメニュー -->
<nav
class="fullscreen-drawer-menu_nav"
aria-label="メインメニュー">
<!-- ホームへのリンク -->
<a
class="fullscreen-drawer-menu_link"
href="#home"
data-fullscreen-drawer-menu-link>
ホーム
</a>
<!-- サービスへのリンク -->
<a
class="fullscreen-drawer-menu_link"
href="#service"
data-fullscreen-drawer-menu-link>
サービス
</a>
<!-- お知らせへのリンク -->
<a
class="fullscreen-drawer-menu_link"
href="#news"
data-fullscreen-drawer-menu-link>
お知らせ
</a>
<!-- お問い合わせへのリンク -->
<a
class="fullscreen-drawer-menu_link"
href="#contact"
data-fullscreen-drawer-menu-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; /* ページ全体のフォント */
}
/* 全画面ドロワーメニューを開く操作エリア */
.fullscreen-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; /* 内容を中央揃え */
}
/* 操作エリアのタイトル */
.fullscreen-drawer-menu_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.fullscreen-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* 全画面ドロワーメニューを開くボタン */
.fullscreen-drawer-menu_open{
padding:12px 24px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* ドロワーメニュー表示中の背景 */
.fullscreen-drawer-menu_overlay{
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9998; /* ドロワーメニューより背面へ表示 */
background:rgba(15,23,42,.45); /* 背景色。.45を大きくすると暗くなる */
opacity:0; /* 初期状態では透明 */
visibility:hidden; /* 初期状態では操作できないようにする */
transition:
opacity .35s,
visibility .35s; /* 0.35秒で背景の表示状態を切り替える */
}
/* 背景の表示状態 */
.fullscreen-drawer-menu_overlay.is-active{
opacity:1; /* 背景を表示 */
visibility:visible; /* 背景を操作可能にする */
}
/* 全画面ドロワーメニュー本体 */
.fullscreen-drawer-menu_drawer{
position:fixed; /* 画面全体へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 背景より前面へ表示 */
display:flex; /* 上部とナビゲーションを縦方向へ配置 */
flex-direction:column; /* 内容を縦並びにする */
width:100%; /* 画面全体の横幅 */
height:100vh; /* 画面全体の高さ */
background:#ffffff; /* ドロワーメニューの背景色 */
transform:translateX(calc(-100% - 40px)); /* 影を含めて画面左外へ隠す */
transition:transform .35s ease; /* 0.35秒で左側から開閉する */
overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ表示する影 */
}
/* 全画面ドロワーメニューの表示状態 */
.fullscreen-drawer-menu_drawer.is-active{
transform:translateX(0); /* 画面全体へ表示 */
}
/* ドロワーメニュー上部 */
.fullscreen-drawer-menu_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
padding:20px 24px; /* 上下20px・左右24pxの内側余白 */
border-bottom:1px solid #e5e7eb; /* 上部とメニューを区切る枠線 */
}
/* ドロワーメニューのタイトル */
.fullscreen-drawer-menu_heading{
margin:0; /* 外側余白をなくす */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューを閉じるボタン */
.fullscreen-drawer-menu_close{
flex-shrink:0; /* ボタンが縮まないようにする */
width:44px; /* ボタンの横幅 */
height:44px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:none; /* ボタンの枠線を非表示 */
border-radius:50%; /* ボタンを円形にする */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ×印の文字色 */
font-size:24px; /* ×印の文字サイズ */
font-weight:700; /* ×印を太字にする */
line-height:1; /* ×印の行間を詰める */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* ナビゲーションメニュー */
.fullscreen-drawer-menu_nav{
display:flex; /* メニュー項目を並べる */
flex-direction:column; /* メニュー項目を縦並びにする */
width:100%; /* 利用可能な横幅いっぱいへ広げる */
max-width:720px; /* メニュー項目の最大横幅 */
margin:0 auto; /* 左右中央へ配置 */
padding:40px 24px; /* 上下40px・左右24pxの内側余白 */
}
/* ナビゲーションリンク */
.fullscreen-drawer-menu_link{
display:block; /* リンク全体をクリック可能にする */
padding:20px 4px; /* 上下20px・左右4pxの内側余白 */
border-bottom:1px solid #e5e7eb; /* メニュー項目を区切る枠線 */
color:#111827; /* リンクの文字色 */
font-size:20px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-decoration:none; /* リンクの下線を非表示 */
}
/* ナビゲーションリンクへマウスを重ねた状態 */
.fullscreen-drawer-menu_link:hover{
color:#2563eb; /* マウスを重ねた時の文字色 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.fullscreen-drawer-menu_wrap{
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のドロワーメニュー上部 */
.fullscreen-drawer-menu_header{
padding:16px 18px; /* 上下16px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のナビゲーション */
.fullscreen-drawer-menu_nav{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のナビゲーションリンク */
.fullscreen-drawer-menu_link{
font-size:18px; /* リンクの文字サイズを小さくする */
}
}
// 全画面ドロワーメニューを開くボタンを取得
const fullscreenDrawerMenuOpen=document.querySelector(
"[data-fullscreen-drawer-menu-open]"
);
// 全画面ドロワーメニューを閉じるボタンを取得
const fullscreenDrawerMenuClose=document.querySelector(
"[data-fullscreen-drawer-menu-close]"
);
// ドロワーメニュー表示中の背景を取得
const fullscreenDrawerMenuOverlay=document.querySelector(
"[data-fullscreen-drawer-menu-overlay]"
);
// 全画面ドロワーメニュー本体を取得
const fullscreenDrawerMenuDrawer=document.querySelector(
"[data-fullscreen-drawer-menu-drawer]"
);
// ドロワーメニュー内のリンクをすべて取得
const fullscreenDrawerMenuLinks=document.querySelectorAll(
"[data-fullscreen-drawer-menu-link]"
);
// 全画面ドロワーメニューを開く共通処理
function openFullscreenDrawerMenu(){
// 背景へ表示用クラスを追加
fullscreenDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューへ表示用クラスを追加
fullscreenDrawerMenuDrawer.classList.add("is-active");
// ドロワーメニューが表示中であることを設定
fullscreenDrawerMenuDrawer.setAttribute("aria-hidden","false");
}
// 全画面ドロワーメニューを閉じる共通処理
function closeFullscreenDrawerMenu(){
// 背景から表示用クラスを削除
fullscreenDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューから表示用クラスを削除
fullscreenDrawerMenuDrawer.classList.remove("is-active");
// ドロワーメニューが非表示であることを設定
fullscreenDrawerMenuDrawer.setAttribute("aria-hidden","true");
}
// 開くボタンをクリックした時
fullscreenDrawerMenuOpen.addEventListener("click",function(){
// 全画面ドロワーメニューを開く
openFullscreenDrawerMenu();
});
// 閉じるボタンをクリックした時
fullscreenDrawerMenuClose.addEventListener("click",function(){
// 全画面ドロワーメニューを閉じる
closeFullscreenDrawerMenu();
});
// 背景部分をクリックした時
fullscreenDrawerMenuOverlay.addEventListener("click",function(){
// 全画面ドロワーメニューを閉じる
closeFullscreenDrawerMenu();
});
// 各メニューリンクへクリック処理を設定
fullscreenDrawerMenuLinks.forEach(function(link){
// メニューリンクをクリックした時
link.addEventListener("click",function(){
// 全画面ドロワーメニューを閉じる
closeFullscreenDrawerMenu();
});
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された、左側から画面全体へ表示される全画面ドロワーメニューです。ボタンをクリックすると画面外からドロワーメニューがスライド表示され、背景のオーバーレイや閉じるボタン、メニュー項目のクリックによって閉じる動作を実装しています。レイアウト・デザイン・開閉処理をそれぞれ別ファイルへ分けているため、初めてドロワーメニューを作る方でも編集しやすい構成です。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlでは、開くボタン・全画面ドロワーメニュー・背景オーバーレイ・ナビゲーションリンクなどのHTMLを定義しています。メニュー項目や表示する文章を変更したい場合は、このファイルを編集します。
style.cssでは、全画面レイアウト・左側からスライドするアニメーション・色・余白・角丸・影・レスポンシブ対応などのデザインを管理しています。見た目を変更したい場合はこのファイルを編集します。
script.jsでは、ドロワーメニューの開閉処理、背景クリックによる終了、閉じるボタン、メニュークリック時の自動終了などを制御しています。
設置方法・使い方
sampleフォルダ内へ3ファイルを配置します。
index.htmlをブラウザで開くとサンプルを実行できます。
「メニューを開く」ボタンを押すと左側から画面全体へドロワーメニューが表示されます。
カスタマイズできる内容
index.htmlでは、メニュー項目・タイトル・説明文・ボタンの文字を変更できます。
style.cssでは、背景色・文字色・ボタン色・影・余白・サイズ・スライド方向・アニメーション時間などを変更できます。
script.jsでは、開閉するタイミングや閉じる条件などの動作を自由に変更できます。
数値調整
style.cssのtransition: transform .35s ease;は、ドロワーメニューが開閉する速度です。.35秒でスライドします。値を大きくするとゆっくり、小さくすると素早く開閉します。
style.cssのtransform:translateX(calc(-100% - 40px));は、ドロワーメニューを画面左外へ隠す位置です。値を変更すると開始位置を調整できます。
style.cssのbackground:rgba(15,23,42,.45);の「.45」は背景の暗さです。値を大きくすると背景が濃く、小さくすると薄く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmedia queryによって画面幅640px以下では余白や文字サイズを調整しています。また、width:100%とheight:100vhを利用しているため、スマートフォン・タブレット・PCの画面サイズに合わせて全画面ドロワーメニューが表示されます。
コメント