基本のドロワーメニューを作る方法
基本のドロワーメニューを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ボタンをクリックすると画面左側から表示されるシンプルなドロワーメニューを作成します。ドロワーメニューを閉じる方法は「閉じる」ボタンのみとし、余計な機能を追加せず基本的な開閉処理だけを実装しています。ドロワーメニューの基本構造や実装方法を学びたい方に適した内容です。
ナビゲーションメニューとして利用できるため、企業サイト、サービスサイト、会員サイト、管理画面など、さまざまなWebサイトへ導入できます。メニューを開くボタンを押すと左側からメニューが表示され、「閉じる」ボタンを押すと非表示になります。基本的な動作だけで構成されているため、後から外側クリックで閉じる機能やESCキー対応などを追加する際のベースとしても利用しやすいサンプルです。
メニュータイトル、リンク名、ボタンの文字はHTMLから変更できます。CSSではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、アニメーション時間などを用途に合わせて調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・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"
data-basic-drawer-menu-open>
メニューを開く
</button>
</div>
<!-- ドロワーメニュー本体 -->
<aside
class="basic-drawer-menu_drawer"
data-basic-drawer-menu-drawer
aria-hidden="true">
<!-- メニュータイトル -->
<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"
data-basic-drawer-menu-close>
閉じる
</button>
</aside>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された基本的なドロワーメニューです。HTMLでは画面左側から表示するドロワーメニューと開閉ボタンを配置し、CSSでは見た目やスライドアニメーションを設定します。JavaScriptではドロワーメニューを開く・閉じる処理のみを実装しており、シンプルな構成で基本的な動作を確認できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはドロワーメニュー全体の構造を作成するファイルです。タイトル、説明文、ボタン名、メニュー項目の内容を変更できます。
style.cssはドロワーメニューのデザインを設定するファイルです。横幅、背景色、余白、文字サイズ、角丸、影、開閉アニメーションなどを変更できます。
script.jsはドロワーメニューを開閉する処理を行います。「メニューを開く」ボタンと「閉じる」ボタンの動作を変更できます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと利用できます。「メニューを開く」をクリックするとドロワーメニューが表示され、「閉じる」をクリックするとメニューが閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー項目を自由に変更できます。用途に合わせて企業サイト、サービス紹介、管理画面などのメニューへ変更できます。
style.cssではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、ボタン色、文字サイズを変更できます。レイアウトやデザインを好みに合わせて調整できます。
script.jsでは開閉処理を編集できます。現在は「メニューを開く」と「閉じる」ボタンのみで開閉する基本的な仕様です。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
width:320px;
ドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると細くなります。
padding:32px 24px;
ドロワーメニュー内側の余白です。値を変更するとメニュー内の余白が変わります。
border-radius:8px;
ボタンやメニュー項目の角丸です。値を大きくすると丸みが強くなります。
gap:10px;
メニュー項目同士の間隔です。値を大きくすると間隔が広がります。
transition:0.3s;
ドロワーメニューの開閉時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによりサンプル全体が画面幅に合わせて縮小されます。また、640px以下ではドロワーメニューの横幅や余白を調整しているため、スマートフォン・タブレット・PCでも利用できます。
コメント