基本のドロップダウンメニューを作る方法
基本のドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとメニューを表示し、もう一度クリックすると閉じるシンプルなドロップダウンメニューをJavaScriptで実装します。複雑なライブラリを使用せず、HTML・CSS・JavaScriptだけで手軽に導入できる構成です。
ヘッダーナビゲーション、管理画面の操作メニュー、プロフィールメニュー、設定メニュー、会員サイトのユーザーメニューなど、さまざまなWebサイトで利用できます。クリックするだけでメニューを開閉できるため、画面をすっきり見せながら必要な項目だけを表示したい場合に便利です。
ボタンの文字、メニュー項目、リンク先はHTMLから変更できます。CSSでは横幅、背景色、文字色、余白、角丸、影などのデザインを調整でき、JavaScriptでは開閉処理を行っています。レスポンシブにも対応しているため、スマートフォン・タブレット・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-dropdown-menu_wrap">
<!-- タイトル -->
<div class="basic-dropdown-menu_title">
基本のドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="basic-dropdown-menu_text">
ボタンをクリックするとメニューを開閉できます。
</p>
<!-- メニューエリア -->
<div class="basic-dropdown-menu_group">
<div class="basic-dropdown-menu_area">
<!-- 開閉ボタン -->
<button
class="basic-dropdown-menu_button"
type="button">
メニュー
<span class="basic-dropdown-menu_arrow">
▼
</span>
</button>
<!-- ドロップダウンメニュー -->
<ul class="basic-dropdown-menu_list">
<li>
<a class="basic-dropdown-menu_link" href="#">
ホーム
</a>
</li>
<li>
<a class="basic-dropdown-menu_link" href="#">
サービス
</a>
</li>
<li>
<a class="basic-dropdown-menu_link" href="#">
お問い合わせ
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 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;
コンテンツ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
max-width:280px;
ドロップダウンメニューの横幅です。値を大きくするとメニューが横に広がり、小さくすると細くなります。
min-height:52px;
ボタンの高さです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。
padding:14px 18px;
ボタン内側の余白です。値を変更するとボタンの大きさが変わります。
border-radius:10px;
ボタンとメニューの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
top:calc(100% + 10px);
ボタンとメニューの間隔です。10pxを大きくすると離れ、小さくすると近付きます。
padding:8px;
メニュー全体の内側余白です。値を大きくすると余白が広がります。
padding:12px 14px;
各メニュー項目の余白です。値を大きくするとクリックしやすくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に応じて自動で縮小表示されます。また、640px以下では余白を小さくするmedia queryを実装しているため、スマートフォン・タブレット・PCでも利用できます。
コメント