タブ切り替え機能付きドロワーメニューを作る方法
タブ切り替え機能付きドロワーメニューを作る方法を紹介します。このサンプルでは、ドロワーメニュー内へタブ切り替え機能を実装し、「メニュー」「SNS」「設定」などのタブをクリックすると表示内容だけを切り替えられます。HTML・CSS・JavaScriptだけで実装でき、ページ遷移せずに複数の情報を整理して表示できます。
通常のドロワーメニューより多くの情報を見やすく整理できるため、企業サイト、管理画面、会員サイト、ECサイトなどでカテゴリごとにメニューを分けたい場合に便利です。ドロワーメニューを閉じることなく必要な情報へ切り替えられるため、操作性も向上します。
タブ名、表示内容、メニュー項目、リンク先URL、配色、横幅、余白、角丸、影、アニメーション速度などを自由に変更できます。画面幅640px以下ではスマートフォン向けレイアウトへ切り替わるため、スマートフォン・タブレット・PCで利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックするとドロワーメニューが表示されます。タブをクリックすると表示内容が切り替わり、「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューを閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8に設定する -->
<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="tab-drawer-menu_wrap">
<!-- 案内エリアのタイトル -->
<h1 class="tab-drawer-menu_title">
タブ切り替え機能付きドロワーメニュー
</h1>
<!-- ドロワーメニューの説明文 -->
<p class="tab-drawer-menu_text">
タブを切り替えると、ドロワーメニュー内の表示内容だけが切り替わります。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="tab-drawer-menu_open"
type="button"
data-tab-drawer-open>
メニューを開く
</button>
</main>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="tab-drawer-menu_overlay"
data-tab-drawer-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<aside
class="tab-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-label="タブ切り替え機能付きドロワーメニュー">
<!-- タブボタンを並べるエリア -->
<div
class="basic-tab-switch_tabs"
role="tablist"
aria-label="ドロワーメニューの表示切り替え">
<!-- 初期表示するメニュータブ -->
<button
class="basic-tab-switch_tab is-active"
id="tab-menu"
type="button"
role="tab"
aria-selected="true"
aria-controls="panel-menu"
data-tab="menu">
メニュー
</button>
<!-- SNSタブ -->
<button
class="basic-tab-switch_tab"
id="tab-sns"
type="button"
role="tab"
aria-selected="false"
aria-controls="panel-sns"
data-tab="sns">
SNS
</button>
<!-- 設定タブ -->
<button
class="basic-tab-switch_tab"
id="tab-setting"
type="button"
role="tab"
aria-selected="false"
aria-controls="panel-setting"
data-tab="setting">
設定
</button>
</div>
<!-- メニュータブに対応する表示内容 -->
<div
class="basic-tab-switch_panel is-active"
id="panel-menu"
role="tabpanel"
aria-labelledby="tab-menu"
data-panel="menu">
<!--
href属性の#をホームページのURLへ変更する
「ホーム」を表示したいメニュー名へ変更できる
-->
<a href="#">ホーム</a>
<!--
href属性の#をサービスページのURLへ変更する
「サービス」を表示したいメニュー名へ変更できる
-->
<a href="#">サービス</a>
<!--
href属性の#をお問い合わせページのURLへ変更する
「お問い合わせ」を表示したいメニュー名へ変更できる
-->
<a href="#">お問い合わせ</a>
</div>
<!-- SNSタブに対応する表示内容 -->
<div
class="basic-tab-switch_panel"
id="panel-sns"
role="tabpanel"
aria-labelledby="tab-sns"
data-panel="sns">
<!--
href属性の#をXのURLへ変更する
「X」を表示したいリンク名へ変更できる
-->
<a href="#">X</a>
<!--
href属性の#をInstagramのURLへ変更する
「Instagram」を表示したいリンク名へ変更できる
-->
<a href="#">Instagram</a>
<!--
href属性の#をYouTubeのURLへ変更する
「YouTube」を表示したいリンク名へ変更できる
-->
<a href="#">YouTube</a>
</div>
<!-- 設定タブに対応する表示内容 -->
<div
class="basic-tab-switch_panel"
id="panel-setting"
role="tabpanel"
aria-labelledby="tab-setting"
data-panel="setting">
<!--
href属性の#をプロフィールページのURLへ変更する
「プロフィール」を表示したいメニュー名へ変更できる
-->
<a href="#">プロフィール</a>
<!--
href属性の#を通知設定ページのURLへ変更する
「通知設定」を表示したいメニュー名へ変更できる
-->
<a href="#">通知設定</a>
<!--
href属性の#をログアウト先のURLへ変更する
「ログアウト」を表示したいメニュー名へ変更できる
-->
<a href="#">ログアウト</a>
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="tab-drawer-menu_close"
type="button"
data-tab-drawer-close>
閉じる
</button>
</aside>
</div>
<!-- JavaScriptファイルを読み込む -->
<script src="script.js"></script>
</body>
</html>
/* =========================================
共通設定
========================================= */
/* すべての要素と疑似要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除する */
padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ページ内のボタン */
button{
font:inherit; /* 親要素と同じフォントを使用する */
}
/* =========================================
案内エリア
========================================= */
/* ページの案内エリア */
.tab-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; /* タイトル・説明文・ボタンを中央揃えにする */
}
/* 案内エリアのタイトル */
.tab-drawer-menu_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:24px; /* タイトルの文字サイズ */
font-weight:700; /* タイトル文字を太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 案内エリアの説明文 */
.tab-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* =========================================
開くボタン
========================================= */
/* ドロワーメニューを開くボタン */
.tab-drawer-menu_open{
min-height:48px; /* タップしやすい最小高さ */
padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#0b6bff; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}
/* 開くボタンへマウスを重ねた状態 */
.tab-drawer-menu_open:hover{
background:#0959d9; /* ホバー時の背景色 */
}
/* =========================================
背景オーバーレイ
========================================= */
/* ドロワーメニュー表示時の背景 */
.tab-drawer-menu_overlay{
display:none; /* 初期状態では非表示にする */
position:fixed; /* ブラウザ画面へ固定する */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9999; /* 他の要素より前面へ表示する */
align-items:stretch; /* ドロワーメニューを画面の高さへ伸ばす */
justify-content:flex-start; /* ドロワーメニューを画面左側へ配置する */
background:rgba(0,0,0,.45); /* 半透明の背景色。.45を大きくすると暗くなる */
}
/* ドロワーメニューの表示状態 */
.tab-drawer-menu_overlay.is-active{
display:flex; /* 表示用クラスが付いたときに表示する */
}
/* =========================================
ドロワーメニュー本体
========================================= */
/* ドロワーメニュー本体 */
.tab-drawer-menu_drawer{
width:360px; /* ドロワーメニューの横幅。値を大きくすると広がる */
max-width:90%; /* 小さい画面で画面幅を超えない最大横幅 */
height:100%; /* ブラウザ画面と同じ高さにする */
padding:24px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示する */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:10px 0 30px rgba(0,0,0,.18); /* ドロワーメニュー右側の影 */
animation:tab-drawer-menu-slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくすると遅くなる */
}
/* =========================================
タブボタン
========================================= */
/* タブボタンを並べるエリア */
.basic-tab-switch_tabs{
display:flex; /* タブボタンを横並びにする */
border-bottom:1px solid #d1d5db; /* タブ下側の区切り線 */
}
/* 各タブボタン */
.basic-tab-switch_tab{
flex:1; /* 3つのタブを同じ横幅にする */
min-width:0; /* 狭い画面で横幅がはみ出さないようにする */
min-height:48px; /* タップしやすい最小高さ */
padding:14px 8px; /* 上下14px・左右8pxの内側余白 */
border:1px solid #d1d5db; /* タブボタンの枠線 */
border-bottom:none; /* 下側の枠線を削除する */
border-radius:12px 12px 0 0; /* 上側だけ角丸にする */
background:#ffffff; /* タブボタンの背景色 */
color:#111827; /* タブボタンの文字色 */
font-size:14px; /* タブボタンの文字サイズ */
font-weight:700; /* タブ文字を太字にする */
line-height:1.5; /* タブ文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease,color .2s ease; /* 0.2秒で背景色と文字色を変化させる */
}
/* 2つ目以降のタブボタン */
.basic-tab-switch_tab + .basic-tab-switch_tab{
margin-left:6px; /* タブボタン同士の間隔 */
}
/* 選択中のタブボタン */
.basic-tab-switch_tab.is-active{
background:#0b6bff; /* 選択中タブの背景色 */
color:#ffffff; /* 選択中タブの文字色 */
border-color:#0b6bff; /* 選択中タブの枠線色 */
}
/* タブボタンへマウスを重ねた状態 */
.basic-tab-switch_tab:not(.is-active):hover{
background:#f1f5f9; /* 未選択タブのホバー時背景色 */
}
/* =========================================
タブパネル
========================================= */
/* 各タブの表示内容 */
.basic-tab-switch_panel{
display:none; /* 初期状態では非表示にする */
padding:18px; /* パネル内側の余白 */
border:1px solid #d1d5db; /* パネルの枠線 */
border-top:none; /* タブとの境界にある上側の枠線を削除する */
background:#ffffff; /* パネルの背景色 */
}
/* 選択中のタブパネル */
.basic-tab-switch_panel.is-active{
display:block; /* 選択中のパネルだけ表示する */
}
/* タブパネル内のリンク */
.basic-tab-switch_panel a{
display:block; /* リンク全体をクリックできるようにする */
min-height:44px; /* タップしやすい最小高さ */
padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
border-radius:8px; /* リンクの角丸 */
color:#111827; /* リンクの文字色 */
font-size:16px; /* リンクの文字サイズ */
font-weight:600; /* リンク文字の太さ */
line-height:1.5; /* リンク文字の行間 */
text-align:left; /* リンク文字を左揃えにする */
text-decoration:none; /* リンクの下線を削除する */
transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}
/* タブパネル内のリンクへマウスを重ねた状態 */
.basic-tab-switch_panel a:hover{
background:#f3f4f6; /* ホバー時の背景色 */
}
/* =========================================
閉じるボタン
========================================= */
/* ドロワーメニューを閉じるボタン */
.tab-drawer-menu_close{
width:100%; /* ドロワーメニューの横幅いっぱいに表示する */
min-height:48px; /* タップしやすい最小高さ */
margin:24px 0 0; /* 上側24pxの余白 */
padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:8px; /* ボタンの角丸 */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}
/* 閉じるボタンへマウスを重ねた状態 */
.tab-drawer-menu_close:hover{
background:#374151; /* ホバー時の背景色 */
}
/* =========================================
表示アニメーション
========================================= */
@keyframes tab-drawer-menu-slide{
/* アニメーション開始時 */
from{
opacity:0; /* 完全に透明な状態から開始する */
transform:translateX(-100%); /* 画面左側の外から開始する */
}
/* アニメーション終了時 */
to{
opacity:1; /* 完全に表示する */
transform:translateX(0); /* 元の位置へ移動する */
}
}
/* =========================================
スマートフォン対応
========================================= */
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小する */
}
/* スマートフォン用の案内エリア */
.tab-drawer-menu_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小する */
padding:24px 18px; /* 内側余白を縮小する */
}
/* スマートフォン用の開くボタン */
.tab-drawer-menu_open{
width:100%; /* ボタンを案内エリアの横幅いっぱいに表示する */
}
/* スマートフォン用のドロワーメニュー */
.tab-drawer-menu_drawer{
width:100%; /* ドロワーメニューを画面幅いっぱいに表示する */
max-width:100%; /* 最大横幅を画面幅に合わせる */
padding:24px 20px; /* 内側余白を調整する */
}
/* スマートフォン用のタブボタン */
.basic-tab-switch_tab{
padding:12px 4px; /* 狭い画面用に左右余白を縮小する */
font-size:13px; /* 狭い画面用に文字サイズを小さくする */
}
}
// =========================================
// ドロワーメニューで使用する要素を取得
// =========================================
// ドロワーメニューを開くボタンを取得
const tabDrawerMenuOpen=document.querySelector(
"[data-tab-drawer-open]"
);
// ドロワーメニューを閉じるボタンを取得
const tabDrawerMenuClose=document.querySelector(
"[data-tab-drawer-close]"
);
// ドロワーメニュー表示時の背景を取得
const tabDrawerMenuOverlay=document.querySelector(
"[data-tab-drawer-overlay]"
);
// タブボタンをすべて取得
const basicTabSwitchTabs=document.querySelectorAll(
".basic-tab-switch_tab"
);
// タブパネルをすべて取得
const basicTabSwitchPanels=document.querySelectorAll(
".basic-tab-switch_panel"
);
// =========================================
// ドロワーメニューを開く処理
// =========================================
// 開くボタンをクリックしたとき
tabDrawerMenuOpen.addEventListener("click",function(){
// 背景オーバーレイへ表示用クラスを追加
tabDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューが表示中であることを支援技術へ伝える
tabDrawerMenuOverlay.setAttribute(
"aria-hidden",
"false"
);
});
// =========================================
// ドロワーメニューを閉じる共通処理
// =========================================
// ドロワーメニューを閉じる関数
function closeTabDrawerMenu(){
// 背景オーバーレイから表示用クラスを削除
tabDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューが非表示であることを支援技術へ伝える
tabDrawerMenuOverlay.setAttribute(
"aria-hidden",
"true"
);
}
// =========================================
// 閉じるボタンで閉じる処理
// =========================================
// 閉じるボタンをクリックしたとき
tabDrawerMenuClose.addEventListener(
"click",
closeTabDrawerMenu
);
// =========================================
// 背景クリックで閉じる処理
// =========================================
// 背景オーバーレイをクリックしたとき
tabDrawerMenuOverlay.addEventListener(
"click",
function(event){
// クリックされた要素が背景オーバーレイ自身の場合だけ閉じる
if(event.target===tabDrawerMenuOverlay){
// ドロワーメニューを閉じる
closeTabDrawerMenu();
}
}
);
// =========================================
// タブを切り替える処理
// =========================================
// 各タブボタンへクリック処理を設定
basicTabSwitchTabs.forEach(function(tab){
// タブボタンをクリックしたとき
tab.addEventListener("click",function(){
// クリックされたタブに対応する名前を取得
const target=tab.dataset.tab;
// すべてのタブボタンを未選択状態へ変更
basicTabSwitchTabs.forEach(function(item){
// 選択中クラスを削除
item.classList.remove("is-active");
// 支援技術へ未選択状態を伝える
item.setAttribute(
"aria-selected",
"false"
);
});
// すべてのタブパネルを非表示状態へ変更
basicTabSwitchPanels.forEach(function(panel){
// 表示用クラスを削除
panel.classList.remove("is-active");
});
// クリックされたタブを選択状態へ変更
tab.classList.add("is-active");
// 支援技術へ選択状態を伝える
tab.setAttribute(
"aria-selected",
"true"
);
// 対応するタブパネルを取得
const targetPanel=document.querySelector(
'[data-panel="'+target+'"]'
);
// 対応するタブパネルを表示
targetPanel.classList.add("is-active");
});
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、ドロワーメニュー内のタブをクリックすると表示内容だけを切り替えられます。HTMLでレイアウトを作成し、CSSでドロワーメニューとタブのデザインを設定、JavaScriptでドロワーメニューの開閉とタブ切り替えを行っています。
ドロワーメニュー内へ複数のカテゴリをまとめて表示できるため、通常メニュー、SNSリンク、設定などを整理して配置できます。ページ遷移せずに表示内容だけを切り替えられるため、管理画面や会員サイト、企業サイトなどでも利用しやすい構成です。
タブ名、各タブの表示内容、リンク先URL、ドロワーメニューの横幅、配色、余白、影、背景の暗さ、表示アニメーションの速度などを変更できます。画面幅640px以下ではスマートフォン向けレイアウトへ切り替わるため、スマートフォン・タブレット・PCで利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
ドロワーメニュー全体の構造を定義しています。タブ名、各タブに表示するリンク、リンク先URL、ボタンの文字などを編集できます。タブを追加したい場合は、タブボタンと対応する表示パネルを同じ形式で追加します。
style.css
ドロワーメニュー、背景オーバーレイ、タブボタン、表示パネル、リンク、ボタン、表示アニメーション、レスポンシブ表示を設定しています。配色、横幅、余白、角丸、影、背景色、表示速度などを変更できます。
script.js
ドロワーメニューの開閉処理とタブ切り替え処理を行っています。クリック時の動作や初期表示するタブを変更できます。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを同じ階層へ配置します。
sample/index.htmlをブラウザで開くとサンプルを確認できます。「メニューを開く」をクリックするとドロワーメニューが表示され、タブをクリックすると表示内容が切り替わります。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、タブ名、各タブのリンク、リンク先URL、ボタンの文字を変更できます。表示内容を増やしたい場合は、新しいタブボタンと表示パネルを追加してください。
style.cssでは、ドロワーメニューの横幅、背景色、ボタン色、タブの配色、文字サイズ、余白、角丸、影、背景オーバーレイの暗さ、アニメーション速度を変更できます。
script.jsでは、ドロワーメニューの開閉処理やタブ切り替え処理を変更できます。
数値調整
style.cssのwidth:360px;はドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると狭くなります。
padding:24px;はドロワーメニュー内側の余白です。値を大きくすると余白が広くなり、小さくすると詰まった表示になります。
border-radius:12px;はタブボタンの角丸です。値を大きくすると丸みが強くなります。
background:rgba(0,0,0,.45);の.45は背景の暗さです。値を大きくすると暗くなり、小さくすると背景が透けます。
animation:tab-drawer-menu-slide .35s ease forwards;の.35sは表示アニメーション時間です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
レスポンシブ対応
style.cssではwidth:100%、max-width:100%、overflow-y:auto、@media screen and (max-width:640px)を使用してレスポンシブ対応しています。
スマートフォンではドロワーメニューを画面幅いっぱいに表示し、タブボタンや開くボタンも画面サイズに合わせて調整されます。タブレット・PCでもレイアウトが崩れず利用できます。
コメント