最初から開いたドロワーメニューを作る方法
最初から開いたドロワーメニューを作る方法を紹介します。このサンプルでは、ページを表示した時点で画面左側からドロワーメニューが開いた状態になり、利用者がすぐにメニューを確認できます。通常は「メニューを開く」ボタンを押して表示することが多いドロワーメニューですが、初期状態から表示することで、ナビゲーションを目立たせたいページや案内を優先して見せたい場面にも利用できます。
管理画面のサイドメニュー、会員サイトのナビゲーション、サービス一覧、カテゴリ一覧、操作メニューなど、最初からメニューを表示しておきたい画面で活用できます。表示後は「閉じる」ボタンをクリックするとドロワーメニューを閉じることができるため、通常のドロワーメニューと同じように利用できます。
タイトル、説明文、メニュー項目、リンク先はHTMLから変更でき、CSSでは横幅、余白、背景色、文字色、ボタン色、角丸、影などを自由に調整できます。JavaScriptでは開閉処理を管理しており、初期状態を開いたまま表示する構成になっています。レスポンシブにも対応しているため、スマートフォン・タブレット・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="drawer-menu-open-by-default_wrap">
<!-- タイトル -->
<div class="drawer-menu-open-by-default_title">
ドロワーメニュー
</div>
<!-- 説明文 -->
<p class="drawer-menu-open-by-default_text">
ページを開くとドロワーメニューが最初から表示されます。
</p>
</main>
<!-- 最初から開いた状態で表示するドロワーメニュー -->
<aside
class="drawer-menu-open-by-default_drawer is-active"
aria-label="メニュー">
<!-- ドロワーメニューの見出し -->
<div class="drawer-menu-open-by-default_heading">
メニュー
</div>
<!-- ナビゲーションメニュー -->
<nav class="drawer-menu-open-by-default_nav">
<!-- ホームへのリンク -->
<a class="drawer-menu-open-by-default_link" href="#">
ホーム
</a>
<!-- サービスへのリンク -->
<a class="drawer-menu-open-by-default_link" href="#">
サービス
</a>
<!-- お知らせへのリンク -->
<a class="drawer-menu-open-by-default_link" href="#">
お知らせ
</a>
<!-- お問い合わせへのリンク -->
<a class="drawer-menu-open-by-default_link" href="#">
お問い合わせ
</a>
</nav>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="drawer-menu-open-by-default_close"
type="button">
閉じる
</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;
ドロワーメニューの横幅です。値を大きくするとメニューが広くなり、小さくすると細くなります。
max-width:85%;
ドロワーメニューが画面幅に対して表示できる最大割合です。値を変更すると画面に対する表示幅が変わります。
border-radius:18px;
ページ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
border-radius:8px;
メニュー項目やボタンの角丸です。値を大きくすると丸みが強くなります。
gap:10px;
メニュー項目同士の間隔です。値を大きくすると項目の間隔が広がります。
transition:0.3s;
ドロワーメニューが移動する時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによりページ全体が画面幅に合わせて縮小されます。また、640px以下では余白を小さくし、ドロワーメニューの内側余白も調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント