指定時間後に自動で閉じるドロップダウンメニューの作り方
指定時間後に自動で閉じるドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとドロップダウンメニューが表示され、一定時間が経過すると自動的に閉じる動作を実装します。ユーザーが閉じる操作を行わなくても自動で非表示になるため、一時的なメニュー表示や簡単な操作メニューに便利です。
ナビゲーションメニューや設定メニュー、アクションメニューなど、短時間だけ表示したい場面に適しています。一定時間後に自動で閉じるため、画面を占有し続けることがなく、スマートフォン・タブレット・PCでも快適に利用できます。
ボタンの文字やメニュー項目はHTMLから変更でき、CSSでは色やサイズ、余白、角丸、影などのデザインを調整できます。JavaScriptでは自動で閉じるまでの時間を変更できるため、用途に合わせて表示時間を自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを表示」をクリックすると表示され、3秒後に自動で閉じます。
コードをコピーして使おう！
<!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="auto-close-dropdown-menu_wrap">
<!-- タイトル -->
<div class="auto-close-dropdown-menu_title">
指定時間後に自動で閉じるドロップダウンメニュー
</div>
<!-- 説明文 -->
<p class="auto-close-dropdown-menu_text">
ボタンをクリックするとメニューが表示されます。
</p>
<!-- ボタンとメニュー -->
<div class="auto-close-dropdown-menu_area">
<button
class="auto-close-dropdown-menu_button"
type="button"
id="auto-close-dropdown-menu-button">
メニューを表示
</button>
<ul
class="auto-close-dropdown-menu_list"
id="auto-close-dropdown-menu-list">
<li>プロフィール</li>
<li>設定</li>
<li>ログアウト</li>
</ul>
</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をブラウザで開いてください。「メニューを表示」をクリックするとドロップダウンメニューが表示され、3秒後に自動で閉じる動作を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、メニュー項目を変更できます。
style.cssでは全体の横幅、余白、背景色、ボタンやメニューの色、角丸、影、メニューの横幅、表示位置などを自由に変更できます。
script.jsでは自動で閉じるまでの表示時間を変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると広く、小さくするとコンパクトになります。
margin:40px auto 220px;
下側220pxを変更するとメニュー表示時の余白が変わります。
padding:32px;
全体の内側余白です。値を変更すると見た目の余裕が変わります。
top:calc(100% + 12px);
ボタンからメニューまでの表示位置です。12pxを変更すると上下の間隔が変わります。
width:220px;
ドロップダウンメニューの横幅です。値を変更するとメニューのサイズが変わります。
script.js
const autoCloseDropdownMenuDelay = 3000;
3000は3秒を表します。値を大きくするとメニューの表示時間が長くなり、小さくすると短時間で自動的に閉じます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxで画面幅に応じたレイアウトとなっており、640px以下では@media(max-width:640px)で内側余白やメニューの横幅を調整しています。スマートフォン・タブレット・PCのいずれでも利用できます。
“`
コメント