ドロップアップメニューが開く固定フッターメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

フッターメニュー

ドロップアップメニューが開く固定フッターメニューを作る方法

ドロップアップメニューが開く固定フッターメニューを作る方法を紹介します。本記事では、HTML、CSS、JavaScriptを使って、画面下部に固定したフッターメニューの一部ボタンをクリックすると、そのボタンの真上へドロップアップメニューを表示する方法を解説します。通常の固定フッターメニューでは収まりきらない機能をまとめて表示したい場合や、画面をすっきり見せながら操作性を向上させたい場合に便利なレイアウトです。

このサンプルコードでは、「メニュー」と「通知」の2つのボタンに、それぞれ異なるドロップアップメニューを設定しています。クリックしたボタンだけをアクティブ表示にし、対応するメニューだけを開くため、どのボタンのメニューが表示されているのか一目で分かります。また、別のボタンをクリックすると前のメニューは自動で閉じるため、複数のドロップアップメニューを分かりやすく管理できます。

このようなレイアウトは、スマートフォン向けサイト、管理画面、ECサイト、会員サイト、Webアプリなどでよく利用されています。限られたフッターメニューのスペースを有効活用しながら、関連する操作をボタンごとにまとめて表示したい場合にも活用できます。複数のドロップアップメニューを実装したい方や、実用的な固定フッターメニューを作成したい方にもおすすめのサンプルです。

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

デモ

ドロップアップメニュー

「メニュー」と「通知」はクリックすると、それぞれの真上へメニューが表示されます。

複数対応

クリックしたボタンの真上へ、それぞれ別のドロップアップメニューを表示します。

選択中の表示

開いているメニューのボタンだけ色が変わるため、現在の状態が分かりやすくなります。

開いているドロップアップメニューのボタンには is-active クラスを追加し、色を変更します。

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

<!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="footer-menu-dropup_wrap">

    <!-- タイトル -->
    <h1 class="footer-menu-dropup_title">
      ドロップアップメニューが開く固定フッターメニュー
    </h1>

    <!-- コンテンツ -->
    <main class="footer-menu-dropup_content">
      <p>「メニュー」と「通知」をクリックすると、それぞれの真上にドロップアップメニューが開きます。</p>
    </main>

  </div>

  <!-- フッターメニュー -->
  <nav class="footer-menu-dropup_nav">

    <a href="#" class="footer-menu-dropup_item">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M3 10L12 3L21 10M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>ホーム</span>
    </a>

    <a href="#" class="footer-menu-dropup_item">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"/>
        <path d="M16 16L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <span>検索</span>
    </a>

    <button type="button" class="footer-menu-dropup_button">

      <div class="footer-menu-dropup_menu">
        <a href="#">カテゴリ一覧</a>
        <a href="#">人気記事</a>
        <a href="#">新着記事</a>
      </div>

      <svg viewBox="0 0 24 24" fill="none">
        <path d="M5 7H19M5 12H19M5 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>

      <span>メニュー</span>

    </button>

    <button type="button" class="footer-menu-dropup_button">

      <div class="footer-menu-dropup_menu">
        <a href="#">未読通知</a>
        <a href="#">すべて表示</a>
        <a href="#">通知設定</a>
      </div>

      <svg viewBox="0 0 24 24" fill="none">
        <path d="M7 17H17L16 15V10C16 7.8 14.2 6 12 6C9.8 6 8 7.8 8 10V15L7 17Z" stroke="currentColor" stroke-width="2"/>
        <path d="M10.5 19C10.8 19.6 11.3 20 12 20C12.7 20 13.2 19.6 13.5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>

      <span>通知</span>

    </button>

    <a href="#" class="footer-menu-dropup_item">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="8" r="3" stroke="currentColor" stroke-width="2"/>
        <path d="M6 20C6 16.7 8.7 14 12 14C15.3 14 18 16.7 18 20" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>マイページ</span>
    </a>

  </nav>

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

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに固定フッターメニューと各ボタン用のドロップアップメニューを配置し、CSSでクリックしたボタンの真上にメニューが表示されるように設定します。JavaScriptでは、クリックしたボタンに対応するメニューだけを開き、別のボタンをクリックしたときは前のメニューを閉じる処理を行います。 

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。画面下部の「メニュー」または「通知」をクリックすると、それぞれのボタンの真上にドロップアップメニューが表示されます。

コメント