指定時間後に自動で閉じるドロワーメニューの作り方
指定時間後に自動で閉じるドロワーメニューの作り方を紹介します。このサンプルでは、画面左側から表示されるドロワーメニューを作成し、メニューを開いたあと一定時間が経過すると自動で閉じる動作を実装します。利用者が閉じるボタンを押さなくてもメニューが自動的に非表示になるため、一時的なメニュー表示や案内表示などにも利用しやすいサンプルです。
ボタンをクリックするとドロワーメニューが開き、JavaScriptでタイマーが開始されます。設定した時間が経過すると自動的に閉じるため、操作を途中で行わなくても画面を元の状態へ戻せます。メニューの表示中も通常のドロワーメニューと同じようにリンクをクリックできるため、必要な操作を行ったあと自然に閉じる動作を実現できます。
タイトル、説明文、メニュー項目はHTMLから変更でき、CSSでは横幅、余白、背景色、文字色、角丸、影、アニメーション速度などを調整できます。JavaScriptでは自動で閉じるまでの待機時間を自由に変更できるため、用途に合わせて表示時間を調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいドロワーメニューのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックすると、3秒後に自動で閉じます。
「メニューを開く」をクリックすると左側から表示され、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-drawer_wrap">
<!-- タイトル -->
<div class="auto-close-drawer_title">
自動で閉じるドロワーメニュー
</div>
<!-- 説明文 -->
<p class="auto-close-drawer_text">
「メニューを開く」をクリックすると、3秒後に自動で閉じます。
</p>
<!-- メニューを開くボタン -->
<button
class="auto-close-drawer_open"
type="button">
メニューを開く
</button>
</div>
<!-- ドロワーメニュー -->
<div class="auto-close-drawer_drawer">
<!-- メニュータイトル -->
<div class="auto-close-drawer_heading">
メニュー
</div>
<!-- メニュー一覧 -->
<nav class="auto-close-drawer_nav">
<a
class="auto-close-drawer_link"
href="#">
ホーム
</a>
<a
class="auto-close-drawer_link"
href="#">
サービス
</a>
<a
class="auto-close-drawer_link"
href="#">
お知らせ
</a>
<a
class="auto-close-drawer_link"
href="#">
お問い合わせ
</a>
</nav>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニュー本体と「メニューを開く」ボタンを配置し、CSSではレイアウトや配色、スライドアニメーションを設定しています。JavaScriptではボタンをクリックしたときにドロワーメニューを表示し、一定時間が経過すると自動で閉じる処理を実装しています。
「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。同時にタイマーが開始され、設定した時間が経過すると自動的にドロワーメニューが閉じます。再度ボタンをクリックした場合は前回のタイマーを停止し、新しいタイマーで再び自動的に閉じるため、連続して操作しても正しく動作します。
タイトルや説明文、メニュー項目は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;
コンテンツ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
コンテンツ全体の上下余白です。40pxを変更すると上下の間隔が変わります。
padding:32px;
コンテンツ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
コンテンツ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:320px;
ドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると細くなります。
transition:transform .3s ease;
ドロワーメニューが開閉する時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く動きます。
script.js
setTimeout(...,3000);
3000は3秒を表します。値を変更すると、自動で閉じるまでの待機時間を変更できます。5000なら5秒、10000なら10秒になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではmax-width:700pxとwidth:100%によりコンテンツ全体が画面幅に応じて縮小されます。また、ドロワーメニューにはmax-width:85%を指定しているため、小さい画面では画面幅に収まるサイズで表示されます。さらに、@media (max-width:640px)で内側余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント