基本のドロワーメニューを作る方法
基本のドロワーメニューを作る方法を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると、画面左側からドロワーメニューがスライドして表示されます。普段はメニューを画面外へ隠しておき、必要なときだけ表示できるため、ページの表示領域を広く使いながらナビゲーションを設置できます。
スマートフォンサイトのナビゲーションをはじめ、会員サイトのメニュー、管理画面のナビゲーション、ECサイトの商品カテゴリーや各種ページへのリンクなど、限られた画面内へ複数のリンクをまとめたい場面に利用できます。このサンプルでは「ホーム」「サービス」「お知らせ」「お問い合わせ」の4つのリンクを縦並びで配置し、メニューを開いている間はページ側へ半透明の背景を表示します。閉じる操作はドロワーメニュー内の「閉じる」ボタンだけで行い、背景部分をクリックしても閉じない仕様です。
HTMLではメニュー項目やリンク先を変更でき、CSSではドロワーメニューの横幅、余白、背景色、リンクのデザイン、スライド速度などを調整できます。JavaScriptではis-activeクラスの追加と削除によってメニューと背景の表示状態を切り替えます。また、画面幅640px以下ではドロワーメニューなどの余白を小さくしているため、スマートフォン・タブレット・PCで利用しやすく、基本的なドロワーメニューを導入したい場合のサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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="basic-drawer-menu_wrap">
<!-- タイトル -->
<div class="basic-drawer-menu_title">
基本ドロワーメニュー
</div>
<!-- 説明文 -->
<p class="basic-drawer-menu_text">
「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。
</p>
<!-- ドロワーを開くボタン -->
<button class="basic-drawer-menu_open" type="button">
メニューを開く
</button>
</div>
<!-- ドロワー表示中の背景 -->
<div class="basic-drawer-menu_overlay"></div>
<!-- ドロワーメニュー -->
<div class="basic-drawer-menu_drawer">
<!-- ドロワー内の見出し -->
<div class="basic-drawer-menu_heading">
メニュー
</div>
<!-- ナビゲーション -->
<nav class="basic-drawer-menu_nav">
<a class="basic-drawer-menu_link" href="#">
ホーム
</a>
<a class="basic-drawer-menu_link" href="#">
サービス
</a>
<a class="basic-drawer-menu_link" href="#">
お知らせ
</a>
<a class="basic-drawer-menu_link" href="#">
お問い合わせ
</a>
</nav>
<!-- ドロワーを閉じるボタン -->
<button class="basic-drawer-menu_close" type="button">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで「メニューを開く」ボタン、半透明の背景、ドロワーメニュー、ナビゲーションリンク、「閉じる」ボタンを配置します。CSSではドロワーメニューを画面左側へ隠し、開いたときに画面内へスライドして表示するデザインを設定します。JavaScriptではボタン操作に合わせてis-activeクラスを追加・削除し、ドロワーメニューと半透明の背景を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはドロワーメニュー全体を構成するファイルです。「メニューを開く」ボタン、「ホーム」「サービス」「お知らせ」「お問い合わせ」のナビゲーションリンク、「閉じる」ボタンを配置しています。メニュー名やリンク先を変更する場合は、このファイルを編集します。
style.cssはページ全体、サンプル表示エリア、半透明の背景、ドロワーメニュー、ナビゲーションリンク、開閉ボタンのデザインを設定するファイルです。ドロワーメニューは閉じているときに画面左側へ移動させ、is-activeクラスが追加されると画面内へスライドして表示します。
script.jsはドロワーメニューの開閉を行うファイルです。「メニューを開く」ボタンをクリックすると、ドロワーメニューと半透明の背景へis-activeクラスを追加します。「閉じる」ボタンをクリックすると、それぞれのis-activeクラスを削除してドロワーメニューを閉じます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、追加のライブラリは必要ありません。
「メニューを開く」ボタンをクリックすると、画面左側からドロワーメニューが表示され、同時にページ側へ半透明の背景が表示されます。ドロワーメニューを閉じる場合は、メニュー内の「閉じる」ボタンをクリックします。背景部分をクリックしてもドロワーメニューは閉じません。
カスタマイズできる内容
index.htmlでは「基本ドロワーメニュー」のタイトル、説明文、ドロワーメニュー内の見出し、ナビゲーションリンクの文字やリンク先を変更できます。実際に使用する場合は、各リンクのhref="#"を移動先のURLへ変更してください。
style.cssではサンプル表示エリアの横幅や余白、ドロワーメニューの横幅、背景色、内側余白、ナビゲーションリンクのデザイン、半透明の背景色、開閉ボタンの色、スライド速度などを変更できます。
数値調整
style.css
max-width:700px;
サンプル表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 26px;
「メニューを開く」ボタンの内側余白です。12pxが上下、26pxが左右の余白です。
background:rgba(15,23,42,.35);
ドロワーメニューを開いたときに表示する半透明の背景色です。最後の.35を大きくすると背景が濃くなり、小さくすると薄くなります。
width:320px;
ドロワーメニューの横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
max-width:85%;
狭い画面でのドロワーメニューの最大横幅です。画面幅に対して85%以内になるように制限しています。
padding:32px 24px;
ドロワーメニューの内側余白です。32pxが上下、24pxが左右の余白です。
transform:translateX(calc(-100% - 40px));
閉じているドロワーメニューを画面左側へ完全に隠すための位置です。40pxはドロワーメニューをさらに左側へ移動する距離です。
transform .3s ease
ドロワーメニューがスライドするときの変化時間です。.3sを大きくするとゆっくり動き、小さくすると速く動きます。
box-shadow:12px 0 30px rgba(15,23,42,.18);
開いたドロワーメニューの右側に表示する影です。12pxは横方向の位置、30pxはぼかしの大きさを表します。
gap:10px;
ナビゲーションリンク同士の間隔です。値を大きくするとリンク同士の間隔が広がります。
padding:14px 16px;
ナビゲーションリンクの内側余白です。14pxが上下、16pxが左右の余白です。
padding:12px;
「閉じる」ボタンの内側余白です。値を大きくするとボタンが高くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでサンプル表示エリアにwidth:100%とmax-width:700pxを設定し、ドロワーメニューにはwidth:320pxとmax-width:85%を設定しているため、画面幅が狭い場合でも横幅に合わせて調整されます。
画面幅640px以下では、サンプル表示エリアの内側余白を24px 18pxへ変更し、ドロワーメニューの内側余白も24px 18pxへ縮小します。スマートフォン・タブレット・PCで利用しやすいように、画面幅に合わせて余白とドロワーメニューの横幅が調整されます。
コメント