コピペで完結!ドロワーメニュー#02【ページ読み込みで自動表示】

html/css/js

ドロワーメニュー(右から)— ページ読み込みで自動表示

本記事では、ページを開いた瞬間に右からスライド表示されるドロワーメニューを HTML / CSS / JS だけで実装します。
画面の暗幕クリック・ESC キー・「閉じる」ボタンで閉じられるほか、 アクセシビリティに配慮してフォーカス移動も行います。
すぐ使えるデモと、コピペ可能なタブ切替のコードブロックを用意しました。

コードについて 本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

ページを開いた瞬間に右から自動でスライド表示されるドロワーメニューです。暗幕クリック・ESCキー・「閉じる」ボタンで閉じられます。

コードをコピーして使おう!

<!-- ================================
     ドロワーメニューのHTML構造
     ================================ -->

<!-- ドロワー全体ラッパー -->
<div class="cp-drawer" id="drawer-auto" data-side="right" data-open="1">

  <!-- 手動で開くためのボタン(任意配置OK) -->
  <p>
    <button class="btn" id="open-drawer-btn"
      aria-haspopup="dialog"
      aria-controls="drawer-auto-panel">
      ドロワーを開く
    </button>
  </p>

  <!-- 暗幕(背景クリックで閉じる) -->
  <div class="layer" aria-hidden="true"></div>

  <!-- パネル本体 -->
  <aside class="panel"
    id="drawer-auto-panel"
    role="dialog"
    aria-modal="true"
    aria-labelledby="drawer-auto-title"
    tabindex="-1">

    <!-- ヘッダー部分 -->
    <header>
      <h3 id="drawer-auto-title">メニュー</h3>
      <button class="close"
        data-close-drawer
        aria-label="閉じる">閉じる</button>
    </header>

    <!-- ナビゲーションリンク -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </aside>
</div>

コメント