アコーディオン付きドロワーメニューを作る方法
アコーディオン付きドロワーメニューを作る方法を紹介します。メニューを開くと親メニューが一覧表示され、クリックすると子メニューが展開されるサンプルです。限られたスペースでも多くのメニューを整理して表示できるため、スマートフォン向けのナビゲーションにも適しています。
このサンプルでは、HTML・CSS・JavaScriptだけで実装しています。ドロワーメニューの開閉だけでなく、親メニューごとにアコーディオンを切り替えられるため、サービス一覧やカテゴリー一覧、サポート情報などを階層構造で見やすく表示できます。
メニュー名や子メニューの内容、色やサイズ、余白なども自由に変更できます。シンプルな構成なので、企業サイトやポートフォリオ、ブログなどさまざまなWebサイトへそのまま導入しやすいサンプルコードです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
サンプルコードのご利用によって発生した損害について、当サイトでは一切の責任を負いかねます。
コードをコピーして使おう！
<!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="accordion-drawer-menu_wrap">
<!-- 操作エリアのタイトル -->
<div class="accordion-drawer-menu_title">
アコーディオン付きドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="accordion-drawer-menu_text">
「メニューを開く」をクリックすると、アコーディオン付きのドロワーメニューを表示します。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="accordion-drawer-menu_open"
type="button"
data-accordion-drawer-menu-open>
メニューを開く
</button>
</main>
<!-- ドロワーメニュー表示中の背景 -->
<div
class="accordion-drawer-menu_overlay"
data-accordion-drawer-menu-overlay>
</div>
<!-- ドロワーメニュー本体 -->
<aside
class="accordion-drawer-menu_drawer"
data-accordion-drawer-menu-drawer
aria-hidden="true">
<!-- ドロワーメニュー上部 -->
<div class="accordion-drawer-menu_header">
<!-- ドロワーメニューのタイトル -->
<div class="accordion-drawer-menu_heading">
メニュー
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="accordion-drawer-menu_close"
type="button"
data-accordion-drawer-menu-close
aria-label="閉じる">
</button>
</div>
<!-- アコーディオンの説明文 -->
<p class="accordion-drawer-menu_drawer-text">
親メニューをクリックすると、子メニューが開閉します。
</p>
<!-- アコーディオン付きナビゲーション -->
<nav
class="accordion-drawer-menu_nav"
aria-label="メインメニュー">
<!-- サービスのアコーディオン -->
<div class="accordion-drawer-menu_group">
<!-- 親メニュー -->
<button
class="accordion-drawer-menu_parent"
type="button"
aria-expanded="false">
サービス
</button>
<!-- 子メニュー -->
<div class="accordion-drawer-menu_child">
<div class="accordion-drawer-menu_child-inner">
<a
class="accordion-drawer-menu_link"
href="#web-production"
data-accordion-drawer-menu-link>
Web制作
</a>
<a
class="accordion-drawer-menu_link"
href="#system-development"
data-accordion-drawer-menu-link>
システム開発
</a>
<a
class="accordion-drawer-menu_link"
href="#maintenance-support"
data-accordion-drawer-menu-link>
保守サポート
</a>
</div>
</div>
</div>
<!-- お知らせのアコーディオン -->
<div class="accordion-drawer-menu_group">
<!-- 親メニュー -->
<button
class="accordion-drawer-menu_parent"
type="button"
aria-expanded="false">
お知らせ
</button>
<!-- 子メニュー -->
<div class="accordion-drawer-menu_child">
<div class="accordion-drawer-menu_child-inner">
<a
class="accordion-drawer-menu_link"
href="#news"
data-accordion-drawer-menu-link>
新着情報
</a>
<a
class="accordion-drawer-menu_link"
href="#event"
data-accordion-drawer-menu-link>
イベント
</a>
<a
class="accordion-drawer-menu_link"
href="#update-history"
data-accordion-drawer-menu-link>
更新履歴
</a>
</div>
</div>
</div>
</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; /* ページ全体のフォント */
}
/* ドロワーメニューを開く操作エリア */
.accordion-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; /* 内容を中央揃え */
}
/* 操作エリアのタイトル */
.accordion-drawer-menu_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.accordion-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* ドロワーメニューを開くボタン */
.accordion-drawer-menu_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; /* マウスカーソルを指型へ変更 */
}
/* ドロワーメニュー表示中の背景 */
.accordion-drawer-menu_overlay{
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9998; /* ドロワーメニューより背面へ表示 */
background:rgba(15,23,42,.6); /* 背景色。.6を大きくすると暗くなる */
opacity:0; /* 初期状態では透明 */
visibility:hidden; /* 初期状態では操作できないようにする */
transition:
opacity .3s,
visibility .3s; /* 0.3秒で背景を表示・非表示にする */
}
/* 背景の表示状態 */
.accordion-drawer-menu_overlay.is-active{
opacity:1; /* 背景を表示 */
visibility:visible; /* 背景を操作可能にする */
}
/* ドロワーメニュー本体 */
.accordion-drawer-menu_drawer{
position:fixed; /* 画面左側へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 背景より前面へ表示 */
width:380px; /* ドロワーメニューの横幅 */
max-width:92%; /* 画面幅の92%を超えないようにする */
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; /* 内容が長い場合は縦スクロール可能にする */
}
/* ドロワーメニューの表示状態 */
.accordion-drawer-menu_drawer.is-active{
transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}
/* ドロワーメニュー上部 */
.accordion-drawer-menu_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
margin-bottom:12px; /* 下側12pxの余白 */
}
/* ドロワーメニューのタイトル */
.accordion-drawer-menu_heading{
margin:0; /* 外側余白をなくす */
color:#111827; /* タイトルの文字色 */
font-size:26px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューを閉じるボタン */
.accordion-drawer-menu_close{
position:relative; /* ×印を配置する基準 */
flex-shrink:0; /* ボタンが縮まないようにする */
width:42px; /* ボタンの横幅 */
height:42px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:1px solid #cbd5e1; /* ボタンの枠線 */
border-radius:10px; /* ボタンの角丸 */
background:#f8fafc; /* ボタンの背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 閉じるボタンの2本の線 */
.accordion-drawer-menu_close::before,
.accordion-drawer-menu_close::after{
content:""; /* 擬似要素を表示 */
position:absolute; /* ボタン中央へ配置 */
top:50%; /* 上端から50%の位置 */
left:50%; /* 左端から50%の位置 */
width:20px; /* 線の長さ */
height:2px; /* 線の太さ */
border-radius:2px; /* 線の角を丸くする */
background:#111827; /* ×印の色 */
}
/* ×印の1本目 */
.accordion-drawer-menu_close::before{
transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}
/* ×印の2本目 */
.accordion-drawer-menu_close::after{
transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}
/* アコーディオンの説明文 */
.accordion-drawer-menu_drawer-text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#64748b; /* 説明文の文字色 */
font-size:15px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* アコーディオン付きナビゲーション */
.accordion-drawer-menu_nav{
display:flex; /* アコーディオンを並べる */
flex-direction:column; /* アコーディオンを縦並びにする */
gap:12px; /* アコーディオン同士の間隔 */
}
/* アコーディオン全体 */
.accordion-drawer-menu_group{
border:1px solid #e2e8f0; /* アコーディオンの枠線 */
border-radius:12px; /* アコーディオンの角丸 */
background:#ffffff; /* アコーディオンの背景色 */
overflow:hidden; /* 角丸の外側を非表示 */
}
/* 親メニュー */
.accordion-drawer-menu_parent{
display:flex; /* 文字と記号を横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 文字と記号を左右へ配置 */
gap:16px; /* 文字と記号の間隔 */
width:100%; /* 横幅いっぱいへ広げる */
padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
border:none; /* ボタンの枠線を非表示 */
background:#ffffff; /* 親メニューの背景色 */
color:#111827; /* 親メニューの文字色 */
font-size:17px; /* 親メニューの文字サイズ */
font-weight:700; /* 親メニューを太字にする */
line-height:1.5; /* 親メニューの行間 */
text-align:left; /* 文字を左揃え */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 親メニュー右側の＋記号 */
.accordion-drawer-menu_parent::after{
content:"＋"; /* 閉じた状態で＋を表示 */
flex-shrink:0; /* 記号が縮まないようにする */
color:#2563eb; /* 記号の色 */
font-size:22px; /* 記号の文字サイズ */
font-weight:700; /* 記号を太字にする */
}
/* 開いている親メニュー */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_parent{
background:#eff6ff; /* 開いている親メニューの背景色 */
color:#1d4ed8; /* 開いている親メニューの文字色 */
}
/* 開いている親メニューの－記号 */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_parent::after{
content:"－"; /* 開いている状態で－を表示 */
}
/* 子メニューの開閉領域 */
.accordion-drawer-menu_child{
display:grid; /* 高さをアニメーションさせるためグリッドを使用 */
grid-template-rows:0fr; /* 初期状態では高さを0にする */
transition:grid-template-rows .3s ease; /* 0.3秒で子メニューを開閉する */
}
/* 開いている子メニュー */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_child{
grid-template-rows:1fr; /* 子メニューの高さを内容に合わせる */
}
/* 子メニューの内側 */
.accordion-drawer-menu_child-inner{
display:flex; /* 子メニューを並べる */
flex-direction:column; /* 子メニューを縦並びにする */
gap:10px; /* 子メニュー同士の間隔 */
min-height:0; /* 閉じた状態で高さを0にできるようにする */
padding:0 14px; /* 初期状態の左右余白 */
overflow:hidden; /* 閉じた内容を非表示 */
transition:padding .3s ease; /* 0.3秒で余白を切り替える */
}
/* 開いている子メニューの内側 */
.accordion-drawer-menu_group.is-open
.accordion-drawer-menu_child-inner{
padding:0 14px 14px; /* 開いた状態で下側余白を追加 */
}
/* 子メニューのリンク */
.accordion-drawer-menu_link{
display:block; /* リンク全体をクリック可能にする */
padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
border-radius:10px; /* リンクの角丸 */
background:#f1f5f9; /* リンクの背景色 */
color:#111827; /* リンクの文字色 */
font-size:15px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-align:left; /* リンク文字を左揃え */
text-decoration:none; /* リンクの下線を非表示 */
}
/* 子メニューのリンクへマウスを重ねた状態 */
.accordion-drawer-menu_link:hover{
background:#dbeafe; /* マウスを重ねた時の背景色 */
color:#1d4ed8; /* マウスを重ねた時の文字色 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.accordion-drawer-menu_wrap{
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のドロワーメニュー */
.accordion-drawer-menu_drawer{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
}
// ドロワーメニューを開くボタンを取得
const accordionDrawerMenuOpen=document.querySelector(
"[data-accordion-drawer-menu-open]"
);
// ドロワーメニューを閉じるボタンを取得
const accordionDrawerMenuClose=document.querySelector(
"[data-accordion-drawer-menu-close]"
);
// ドロワーメニュー表示中の背景を取得
const accordionDrawerMenuOverlay=document.querySelector(
"[data-accordion-drawer-menu-overlay]"
);
// ドロワーメニュー本体を取得
const accordionDrawerMenuDrawer=document.querySelector(
"[data-accordion-drawer-menu-drawer]"
);
// 親メニューをすべて取得
const accordionDrawerMenuParents=document.querySelectorAll(
".accordion-drawer-menu_parent"
);
// 子メニューのリンクをすべて取得
const accordionDrawerMenuLinks=document.querySelectorAll(
"[data-accordion-drawer-menu-link]"
);
// ドロワーメニューを開く共通処理
function openAccordionDrawerMenu(){
// 背景を表示
accordionDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューを表示
accordionDrawerMenuDrawer.classList.add("is-active");
// 表示状態へ変更
accordionDrawerMenuDrawer.setAttribute("aria-hidden","false");
}
// ドロワーメニューを閉じる共通処理
function closeAccordionDrawerMenu(){
// 背景を非表示
accordionDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューを非表示
accordionDrawerMenuDrawer.classList.remove("is-active");
// 非表示状態へ変更
accordionDrawerMenuDrawer.setAttribute("aria-hidden","true");
}
// 開くボタンをクリックした時
accordionDrawerMenuOpen.addEventListener("click",function(){
// ドロワーメニューを開く
openAccordionDrawerMenu();
});
// 閉じるボタンをクリックした時
accordionDrawerMenuClose.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeAccordionDrawerMenu();
});
// 背景をクリックした時
accordionDrawerMenuOverlay.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeAccordionDrawerMenu();
});
// 親メニューごとにクリック処理を設定
accordionDrawerMenuParents.forEach(function(parent){
// 親メニューをクリックした時
parent.addEventListener("click",function(){
// アコーディオン全体を取得
const accordionGroup=parent.closest(
".accordion-drawer-menu_group"
);
// 開閉状態を切り替える
const isOpen=accordionGroup.classList.toggle("is-open");
// 開閉状態を設定
parent.setAttribute(
"aria-expanded",
String(isOpen)
);
});
});
// 子メニューをクリックした時
accordionDrawerMenuLinks.forEach(function(link){
link.addEventListener("click",function(event){
// サンプルのページ移動を止める
event.preventDefault();
// ドロワーメニューを閉じる
closeAccordionDrawerMenu();
});
});
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニュー本体、開閉ボタン、親メニュー、子メニューを配置し、CSSでは画面左側から表示するレイアウトとアコーディオンの開閉アニメーションを設定しています。JavaScriptでは、ドロワーメニューと各アコーディオンの表示状態を切り替えます。
ドロワーメニューを開くと、「サービス」と「お知らせ」の親メニューが表示されます。親メニューをクリックすると、その項目に対応した子メニューが下へ展開され、もう一度クリックすると閉じます。複数の親メニューはそれぞれ個別に開閉できます。
メニュー名やリンク先はindex.html、ドロワーメニューの横幅や色、余白、開閉速度はstyle.cssで変更できます。ドロワーメニューの開閉とアコーディオンの切り替え処理はscript.jsにまとめられています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
操作エリア、開くボタン、オーバーレイ、ドロワーメニュー、閉じるボタン、親メニュー、子メニューを配置しています。タイトル、説明文、親メニュー名、子メニュー名、リンク先を変更すると表示内容が変わります。
style.css
操作エリア、ボタン、オーバーレイ、ドロワーメニュー、アコーディオン、子メニューのデザインを設定しています。ドロワーメニューの横幅、背景色、文字色、余白、角丸、影、開閉速度を変更できます。
script.js
ドロワーメニューの開閉と、親メニューをクリックしたときのアコーディオン切り替えを行います。開閉時にはis-activeクラスとis-openクラスを追加・削除し、aria-hiddenとaria-expandedも更新します。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを配置します。3ファイルは同じ階層に保存してください。
sample/index.htmlをブラウザで開き、「メニューを開く」をクリックするとドロワーメニューが画面左側から表示されます。「サービス」または「お知らせ」をクリックすると、それぞれの子メニューが開閉します。閉じるボタン、背景部分、または子メニューをクリックするとドロワーメニューが閉じます。
カスタマイズできる内容
index.htmlでは、操作エリアのタイトルと説明文、ドロワーメニューのタイトル、親メニュー名、子メニュー名、リンク先を変更できます。アコーディオン項目を追加する場合は、accordion-drawer-menu_groupのまとまりを追加します。
style.cssでは、開くボタンや親メニューの色、ドロワーメニューの横幅、背景色、文字サイズ、余白、角丸、影を変更できます。子メニューの背景色や間隔、開閉アニメーションの速度も調整できます。
script.jsでは、ドロワーメニューの開閉対象や、親メニューをクリックしたときの切り替え処理を変更できます。
数値調整
style.css
width:380px;
ドロワーメニューの横幅です。値を大きくすると幅が広くなり、小さくすると狭くなります。
style.css
max-width:92%;
画面幅に対するドロワーメニューの最大幅です。小さい画面では画面幅の92%以内に収まります。
style.css
transition:transform .35s ease;
0.35秒でドロワーメニューが開閉します。値を大きくするとゆっくり、小さくすると速く動きます。
style.css
transition:grid-template-rows .3s ease;
0.3秒で子メニューが開閉します。値を大きくするとゆっくり、小さくすると速く展開されます。
style.css
transition:padding .3s ease;
0.3秒で子メニュー内側の余白が切り替わります。子メニューの開閉時間と同じ値にすると自然に動きます。
style.css
background:rgba(15,23,42,.6);
0.6はオーバーレイの暗さです。値を大きくすると背景が暗くなり、小さくすると明るくなります。
レスポンシブ対応
style.cssのwidth:100%、max-width:700px、max-width:92%を使用して、画面幅に合わせて操作エリアとドロワーメニューが縮小されます。
画面幅640px以下ではmedia queryによってbody、操作エリア、ドロワーメニューの余白を小さくしています。スマートフォン・タブレット・PCで利用できます。
コメント