ドロワーメニュー内にドロワーメニューを表示する方法
ドロワーメニュー内にドロワーメニューを表示する方法を紹介します。メインのドロワーメニューから別のドロワーメニューを開ける構成になっており、階層を分けながら多くのメニューを整理して表示できます。親メニューから子メニューへ切り替えるような操作を実装したい場合に利用できます。
このサンプルはHTML・CSS・JavaScriptのみで実装しており、メインのドロワーメニューを開いた後、ボタンをクリックすると内部のドロワーメニューが左側から重なるように表示されます。子ドロワーメニューを閉じると親ドロワーメニューへ戻り、親メニューを閉じると両方のドロワーメニューが閉じます。
ECサイトの商品カテゴリー、管理画面の機能一覧、サービス一覧など、階層構造のナビゲーションを分かりやすく表示したい場面に適しています。メニュー項目、配色、横幅、開閉速度などはコード内で変更できるため、サイトデザインに合わせてカスタマイズしやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックするとメインドロワーメニューが表示されます。各メニューをクリックすると対応する子ドロワーメニューが表示され、「戻る」でメインメニューへ戻れます。「閉じる」ボタンまたは背景をクリックすると、すべてのドロワーメニューを閉じられます。
コードをコピーして使おう！
<!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="drawer-menu-inside-drawer_wrap">
<!-- タイトル -->
<div class="drawer-menu-inside-drawer_title">
ドロワーメニュー内にドロワーメニューを表示
</div>
<!-- 説明文 -->
<p class="drawer-menu-inside-drawer_text">
メインメニューから別のドロワーメニューを表示できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="drawer-menu-inside-drawer_open"
type="button">
メニューを開く
</button>
</div>
<!-- 背景オーバーレイ -->
<div class="drawer-menu-inside-drawer_overlay"></div>
<!-- メインドロワーメニュー -->
<aside class="drawer-menu-inside-drawer_main">
<!-- メニュー見出し -->
<div class="drawer-menu-inside-drawer_heading">
メインメニュー
</div>
<!-- メニュー一覧 -->
<div class="drawer-menu-inside-drawer_nav">
<!-- カテゴリードロワーを開く -->
<button type="button" data-child="category">
カテゴリー
</button>
<!-- お知らせドロワーを開く -->
<button type="button" data-child="news">
お知らせ
</button>
<!-- お問い合わせドロワーを開く -->
<button type="button" data-child="contact">
お問い合わせ
</button>
</div>
<!-- メインドロワーを閉じるボタン -->
<button
class="drawer-menu-inside-drawer_close"
type="button">
閉じる
</button>
</aside>
<!-- カテゴリードロワーメニュー -->
<aside class="drawer-menu-inside-drawer_child" data-panel="category">
<div class="drawer-menu-inside-drawer_heading">
カテゴリー
</div>
<div class="drawer-menu-inside-drawer_nav">
<button type="button">HTML</button>
<button type="button">CSS</button>
<button type="button">JavaScript</button>
</div>
<!-- メインメニューへ戻る -->
<button
class="drawer-menu-inside-drawer_back"
type="button">
戻る
</button>
</aside>
<!-- お知らせドロワーメニュー -->
<aside class="drawer-menu-inside-drawer_child" data-panel="news">
<div class="drawer-menu-inside-drawer_heading">
お知らせ
</div>
<div class="drawer-menu-inside-drawer_nav">
<button type="button">新着情報</button>
<button type="button">イベント</button>
<button type="button">更新情報</button>
</div>
<!-- メインメニューへ戻る -->
<button
class="drawer-menu-inside-drawer_back"
type="button">
戻る
</button>
</aside>
<!-- お問い合わせドロワーメニュー -->
<aside class="drawer-menu-inside-drawer_child" data-panel="contact">
<div class="drawer-menu-inside-drawer_heading">
お問い合わせ
</div>
<div class="drawer-menu-inside-drawer_nav">
<button type="button">メール</button>
<button type="button">電話</button>
<button type="button">資料請求</button>
</div>
<!-- メインメニューへ戻る -->
<button
class="drawer-menu-inside-drawer_back"
type="button">
戻る
</button>
</aside>
<!-- JavaScript読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。メインドロワーメニューを開き、その中のメニューをクリックすると対応する子ドロワーメニューが表示される構成です。子ドロワーは複数用意されていますが、一度に表示されるのは選択した1つだけです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlではメニューを開くボタン、メインドロワーメニュー、カテゴリー・お知らせ・お問い合わせの各子ドロワーメニューを配置しています。メニュー項目や表示する内容を変更したい場合は、このファイルを編集します。
style.cssではドロワーメニュー全体のデザインを設定しています。幅、余白、文字サイズ、背景色、ボタンデザイン、アニメーション速度など見た目を変更できます。
script.jsではドロワーメニューの開閉や、選択した子ドロワーメニューへの切り替え処理を行っています。メニューを閉じた際は、開いている子ドロワーメニューもまとめて閉じる仕様です。
設置方法・使い方
sampleフォルダ内へ3ファイルを配置し、index.htmlをブラウザで開くと利用できます。画面の「メニューを開く」をクリックするとメインドロワーメニューが表示され、各メニューをクリックすると対応する子ドロワーメニューへ切り替わります。「戻る」でメインメニューへ戻り、「閉じる」または背景クリックでドロワーメニューを閉じられます。
カスタマイズできる内容
index.htmlではメニュー名や子ドロワーメニュー内の項目を自由に変更できます。子ドロワーメニューを追加したい場合は、data-childとdata-panelを対応させることで増やせます。style.cssではドロワーの横幅、背景色、文字サイズ、ボタンデザイン、余白などを変更できます。
数値調整
style.cssの「width:320px」はドロワーメニューの横幅です。値を変更するとドロワーの幅が変わります。
「transition:.3s」は開閉アニメーションの時間です。0.3秒で開閉し、値を大きくするとゆっくり、小さくすると素早く表示されます。
「max-width:90%」は小さい画面での最大幅です。画面サイズに応じてドロワーが収まるよう調整されています。
レスポンシブ対応
style.cssでレスポンシブ対応しています。max-width:90%と640px以下のメディアクエリにより、スマートフォンではドロワーメニューが画面幅いっぱいに表示されます。PC・タブレット・スマートフォンのいずれでも操作しやすいレイアウトで利用できます。
コメント