設定時間後に自動表示するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

設定時間後に自動表示するドロワーメニューの作り方

設定時間後に自動表示するドロワーメニューの作り方を紹介します。このサンプルでは、ページを開いてから3秒が経過すると、画面左側からドロワーメニューが自動的に表示されます。HTMLでドロワーメニューの内容を構成し、CSSでレイアウトと表示アニメーションを設定、JavaScriptのタイマー処理で表示するタイミングを制御します。

ユーザーによるボタン操作を必要とせず、指定した時間が経過したタイミングで案内を表示できるため、キャンペーン情報、お知らせ、お問い合わせへの誘導、会員登録の案内などに利用できます。表示後は「閉じる」ボタンまたは背景部分をクリックすると、ドロワーメニューを閉じられます。

自動表示までの待機時間はJavaScript内の数値を変更するだけで調整できます。サンプルでは3000ミリ秒、つまり3秒後に表示する設定です。HTML・CSS・JavaScriptを分離しているため、表示内容やドロワーメニューの横幅、背景色、アニメーション速度も用途に合わせて編集できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

設定時間後に自動表示するドロワーメニュー

ページ表示から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-show-drawer-after-delay_wrap">

    <!-- 案内エリアのタイトル -->
    <div class="auto-show-drawer-after-delay_title">
      設定時間後に自動表示するドロワーメニュー
    </div>

    <!-- 自動表示についての説明文 -->
    <p class="auto-show-drawer-after-delay_text">
      ページ表示から3秒後にドロワーメニューが自動表示されます。
    </p>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="auto-show-drawer-after-delay_overlay"
    data-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <div
      class="auto-show-drawer-after-delay_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="auto-show-drawer-after-delay-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="auto-show-drawer-after-delay_drawer-title"
        id="auto-show-drawer-after-delay-title">
        お知らせ
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="auto-show-drawer-after-delay_drawer-text">
        このドロワーメニューは、ページ表示から3秒後に自動表示されます。
      </p>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="auto-show-drawer-after-delay_close"
        type="button"
        data-drawer-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ページを表示してから設定した時間が経過するとドロワーメニューを自動表示できます。HTMLでは画面構成、CSSではドロワーメニューのデザイン、JavaScriptでは一定時間経過後の自動表示と閉じる処理を管理しています。

サンプルではページ表示から3秒後にドロワーメニューが自動表示されます。ドロワーメニューは「閉じる」ボタンまたは背景部分をクリックすると閉じることができ、お知らせやキャンペーン案内、重要な通知などを一定時間後に表示したい場面で利用できます。

HTML・CSS・JavaScriptを分離しているため、表示内容やデザイン、自動表示までの時間などを用途に合わせて変更しやすい構成です。サーバーを用意しなくてもブラウザだけで動作確認できます。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
ドロワーメニュー本体、お知らせの内容、閉じるボタンを配置しています。タイトルや説明文、表示する内容などを変更できます。

style.css
ドロワーメニュー全体のレイアウトやデザインを設定しています。背景色、文字色、横幅、余白、角丸、影、アニメーションなどの見た目を変更できます。

script.js
ページ表示後の自動表示処理、閉じるボタンによる非表示処理、背景クリックで閉じる処理を管理しています。

設置方法・使い方
sampleフォルダを任意の場所へ配置し、sample/index.htmlをブラウザで開いてください。ページを開いてから3秒後にドロワーメニューが自動表示されます。「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューを閉じることができます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ドロワーメニュー内の文章、ボタンの文字を変更できます。style.cssでは背景色、文字色、余白、角丸、影、ドロワーメニューの横幅などを自由に調整できます。script.jsでは自動表示のタイミングやドロワーメニューの開閉処理を変更できます。

数値調整
script.jsのsetTimeout(...,3000)の3000は3秒を表しています。値を変更するとドロワーメニューが自動表示されるまでの待機時間が変わります。style.cssのwidth:360pxはドロワーメニューの横幅です。paddingを変更すると余白、animation:0.35sを変更すると表示アニメーションの速度が変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、@mediaを利用してレスポンシブ対応しています。画面サイズに応じてドロワーメニューの横幅や余白を自動調整するため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント