閉じるボタンで閉じられるドロップダウンメニューの作り方
閉じるボタンで閉じられるドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとドロップダウンメニューが表示され、メニュー内に配置した閉じるボタンを押すことで非表示になります。ユーザー自身のタイミングで閉じられるため、メニュー内容を確認しながら操作できます。
ナビゲーションメニューや設定メニュー、プロフィールメニューなど、ユーザーが複数の項目を確認してから閉じたい場面に適しています。クリックだけで開閉できるシンプルな構成なので、スマートフォン・タブレット・PCでも扱いやすく、さまざまなサイトへ導入できます。
メニュー項目や閉じるボタンの文字はHTMLから変更でき、CSSでは色や余白、角丸、影などのデザインを自由に調整できます。JavaScriptは表示・非表示の切り替えだけを行うため、初心者でも内容を理解しやすく、用途に合わせたカスタマイズも簡単です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
メニュー内の「閉じる」ボタンを押すとドロップダウンメニューが閉じます。
コードをコピーして使おう！
<!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="close-button-dropdown-menu_wrap">
<!-- タイトル -->
<div class="close-button-dropdown-menu_title">
閉じるボタンで閉じられるドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="close-button-dropdown-menu_text">
ボタンをクリックするとメニューが表示されます。
</p>
<!-- ボタンとメニューの配置エリア -->
<div class="close-button-dropdown-menu_area">
<!-- メニュー表示ボタン -->
<button
type="button"
class="close-button-dropdown-menu_open"
id="close-button-dropdown-menu-open">
メニューを表示
</button>
<!-- ドロップダウンメニュー -->
<div
class="close-button-dropdown-menu_list"
id="close-button-dropdown-menu-list">
<!-- メニュー項目 -->
<ul class="close-button-dropdown-menu_items">
<li>プロフィール</li>
<li>設定</li>
<li>ログアウト</li>
</ul>
<!-- 閉じるボタン -->
<button
type="button"
class="close-button-dropdown-menu_close"
id="close-button-dropdown-menu-close">
閉じる
</button>
</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;
全体の内側余白です。値を変更すると余白の広さが変わります。
top:calc(100% + 12px);
ボタンからメニューまでの表示位置です。12pxを変更すると上下の間隔が変わります。
width:220px;
ドロップダウンメニューの横幅です。値を変更するとメニューのサイズが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxにより画面サイズに合わせてレイアウトが調整され、@media(max-width:640px)では余白やメニュー幅を変更しています。スマートフォン・タブレット・PCのいずれでも利用できます。
コメント