HTML/CSSのみで作るドロップダウンメニューの作り方
HTML/CSSのみで作るドロップダウンメニューの作り方を紹介します。このサンプルでは、HTMLとCSSだけを使用してボタンのクリックでメニューを開閉できるシンプルなドロップダウンメニューを作成します。JavaScriptは使用せず、チェックボックスとlabel要素を利用して開閉状態を切り替えるため、軽量で導入しやすい構成になっています。
ドロップダウンメニューは、ヘッダーのナビゲーション、会員サイトのメニュー、管理画面の機能一覧、スマートフォン向けの簡易メニューなど、限られたスペースへ複数のリンクをまとめたい場面で活用できます。ボタンをクリックするとメニューが表示され、もう一度クリックすると閉じるため、シンプルで分かりやすい操作性を実現できます。
タイトル、説明文、ボタン名、リンク名はHTMLから変更でき、CSSでは横幅、背景色、文字色、余白、角丸、枠線、ホバー時のデザインなどを自由にカスタマイズできます。また、レスポンシブ対応のためスマートフォン・タブレット・PCでも利用しやすく、HTML/CSSだけでドロップダウンメニューを実装したい方におすすめのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニュー」をクリックするとドロップダウンメニューが表示されます。もう一度クリックすると閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSのみで作るドロップダウンメニュー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ドロップダウンメニュー全体 -->
<div class="basic-dropdown-menu_wrap">
<!-- タイトル -->
<div class="basic-dropdown-menu_title">
HTML/CSSのみで動くドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="basic-dropdown-menu_text">
ボタンをクリックするとメニューを開閉できます。
</p>
<!-- メニュー配置エリア -->
<div class="basic-dropdown-menu_group">
<div class="basic-dropdown-menu_area">
<!-- 開閉状態を管理するチェックボックス -->
<input
type="checkbox"
id="basic-dropdown-menu"
class="basic-dropdown-menu_toggle">
<!-- メニューボタン -->
<label
class="basic-dropdown-menu_button"
for="basic-dropdown-menu">
メニュー
<span class="basic-dropdown-menu_arrow">▼</span>
</label>
<!-- ドロップダウンメニュー -->
<ul class="basic-dropdown-menu_list">
<li>
<a href="#" class="basic-dropdown-menu_link">
ホーム
</a>
</li>
<li>
<a href="#" class="basic-dropdown-menu_link">
サービス
</a>
</li>
<li>
<a href="#" class="basic-dropdown-menu_link">
お問い合わせ
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスとlabel要素を利用してドロップダウンメニューの開閉を制御し、CSSでは:checked疑似クラスを利用してメニューの表示・非表示を切り替えます。JavaScriptを使用せずに動作するため、軽量で導入しやすいドロップダウンメニューを作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。タイトル、説明文、ボタン名、メニュー項目、リンク先などを編集できます。表示するメニュー項目を追加・削除する場合も、このファイルを編集します。
style.cssはドロップダウンメニュー全体のデザインを設定するファイルです。横幅、背景色、文字色、余白、角丸、影、ボタンデザイン、ホバー時の表示、レスポンシブ表示などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「メニュー」ボタンをクリックするとドロップダウンメニューが表示され、もう一度クリックすると閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、メニュー項目、リンク先を変更できます。サイトメニュー、カテゴリ一覧、サービス一覧など用途に合わせて自由に編集できます。
style.cssではメニュー全体の横幅、背景色、文字色、余白、角丸、ボタンサイズ、メニューの位置、影、リンクのホバー色などを変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:280px;
ドロップダウンメニューの横幅です。値を大きくするとメニューが横へ広がり、小さくするとコンパクトになります。
min-height:52px;
メニューボタンの高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。
padding:14px 18px;
ボタンの内側余白です。値を変更するとボタンの大きさが変わります。
top:calc(100% + 10px);
ボタンとメニューの間隔です。10pxを大きくすると離れ、小さくすると近づきます。
padding:8px;
メニュー全体の内側余白です。値を大きくするとメニュー内の余白が広がります。
padding:12px 14px;
メニュー項目の余白です。値を大きくするとクリックしやすくなり、小さくするとコンパクトになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせて縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント