固定フッターメニューからドロップダウンメニューを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

ボタン・メニュー項目・サイズ・色・余白・枠線などを設定して、HTML・CSS・JavaScriptを自動生成できます。

固定フッターメニューからドロップダウンメニューを表示する方法

画面下部に固定したフッターメニューから、追加のドロップダウンメニューを表示するサンプルです。「メニュー」または「通知」をクリックすると、それぞれのボタンの上側へ専用のメニューが表示されます。

JavaScriptでクリックしたボタンを判定し、対応するメニューへクラスを追加して表示を切り替えます。別のボタンをクリックすると現在開いているメニューを閉じて、新しく選択したメニューだけを表示します。同じボタンをもう一度クリックするとメニューを閉じることもできます。

スマートフォン向けの固定ナビゲーションに追加メニューを組み込みたい場合や、会員サイト・ECサイト・管理画面などで限られたフッター領域から複数のリンクを表示したい場合に利用できます。メニュー名やリンク先、SVGアイコン、表示項目、色、サイズ、余白などはHTMLとCSSから変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

<!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>

  <!-- ページ上部 -->
  <header class="footer-menu-dropdown_header">
    <!-- ページタイトル -->
    <div class="footer-menu-dropdown_title">固定フッターメニュー</div>

    <!-- 操作方法の説明 -->
    <p class="footer-menu-dropdown_description">
      「メニュー」と「通知」をクリックすると、それぞれのボタンからメニューが表示されます。
    </p>
  </header>

  <!-- メインコンテンツ -->
  <main class="footer-menu-dropdown_main">

    <!-- メニューについての説明 -->
    <div class="footer-menu-dropdown_card">
      <div class="footer-menu-dropdown_heading">メニューをクリック</div>
      <p>固定フッターの「メニュー」をクリックすると、カテゴリ一覧などのリンクを表示します。</p>
    </div>

    <!-- 通知についての説明 -->
    <div class="footer-menu-dropdown_card">
      <div class="footer-menu-dropdown_heading">通知をクリック</div>
      <p>「通知」をクリックすると、通知用のリンクへ表示内容が切り替わります。</p>
    </div>

    <!-- ページを長くするための確認用コンテンツ -->
    <div class="footer-menu-dropdown_card">
      <div class="footer-menu-dropdown_heading">固定表示</div>
      <p>ページをスクロールしてもフッターメニューは画面下部に固定されます。</p>
    </div>

  </main>

  <!-- 画面下部へ固定するフッターメニュー -->
  <nav class="footer-menu-dropdown_nav">

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

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

    <!-- ドロップダウンメニューを持つメニューボタン -->
    <button type="button" class="footer-menu-dropdown_button">

      <!-- メニューボタンから表示するドロップダウンメニュー -->
      <div class="footer-menu-dropdown_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"></path>
      </svg>

      <span>メニュー</span>
    </button>

    <!-- ドロップダウンメニューを持つ通知ボタン -->
    <button type="button" class="footer-menu-dropdown_button">

      <!-- 通知ボタンから表示するドロップダウンメニュー -->
      <div class="footer-menu-dropdown_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>
        <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"></path>
      </svg>

      <span>通知</span>
    </button>

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

  </nav>

  <!-- ドロップダウンメニューの開閉処理を読み込む -->
  <script src="script.js"></script>

</body>
</html>

/* すべての要素でpaddingとborderを要素の幅と高さに含める */
*{
  box-sizing:border-box;
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding-bottom:76px; /* 高さ76pxの固定フッターメニューと本文が重ならないように下側へ余白を確保 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ上部 */
.footer-menu-dropdown_header{
  padding:20px; /* ヘッダー内側の余白。値を大きくするとタイトル周辺の余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下部へ1pxの境界線を表示 */
  background:#ffffff; /* ヘッダーの背景色 */
  text-align:center; /* タイトルと説明文を中央揃え */
}

/* ページタイトル */
.footer-menu-dropdown_title{
  margin:0; /* タイトル周囲の余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字で表示 */
  line-height:1.4; /* タイトルの行間 */
}

/* 操作方法の説明文 */
.footer-menu-dropdown_description{
  margin:8px 0 0; /* タイトルとの間に8pxの余白を設定 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:13px; /* 説明文の文字サイズ */
  line-height:1.7; /* 説明文の行間 */
}

/* メインコンテンツ */
.footer-menu-dropdown_main{
  min-height:900px; /* スクロールしても固定表示を確認できるように最低900pxの高さを確保 */
  padding:28px 24px 100px; /* 上28px・左右24px・下100pxの内側余白 */
}

/* 各説明ブロック */
.footer-menu-dropdown_card{
  margin:0 0 28px; /* 各説明ブロックの下側に28pxの間隔を設定 */
}

/* 最後の説明ブロック */
.footer-menu-dropdown_card:last-child{
  margin-bottom:0; /* 最後の説明ブロックだけ下側の余白を削除 */
}

/* 説明ブロックの見出し */
.footer-menu-dropdown_heading{
  margin:0 0 8px; /* 見出しと本文の間に8pxの余白を設定 */
  color:#111827; /* 見出しの文字色 */
  font-size:20px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出しを太字で表示 */
  line-height:1.4; /* 見出しの行間 */
}

/* 説明ブロックの本文 */
.footer-menu-dropdown_card p{
  margin:0; /* 本文周囲の余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:14px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
}

/* 画面下部へ固定するフッターメニュー */
.footer-menu-dropdown_nav{
  position:fixed; /* スクロールしても画面下部の同じ位置へ固定 */
  right:0; /* メニューの右端を画面右端へ合わせる */
  bottom:0; /* メニューの下端を画面下端へ合わせる */
  left:0; /* メニューの左端を画面左端へ合わせる */
  z-index:1000; /* 通常のページコンテンツより手前へ表示 */
  display:flex; /* 5つのメニューを横方向へ並べる */
  width:100%; /* 固定フッターメニューを画面幅いっぱいに表示 */
  height:76px; /* 固定フッターメニューの高さ */
  border-top:1px solid #d1d5db; /* メニュー上部へ1pxの境界線を表示 */
  background:#ffffff; /* 固定フッターメニューの背景色 */
}

/* 通常のリンクとドロップダウンメニューボタン */
.footer-menu-dropdown_item,
.footer-menu-dropdown_button{
  position:relative; /* ドロップダウンメニューの配置基準として使用 */
  display:flex; /* アイコンと文字の配置にFlexboxを使用 */
  flex:1; /* 5つの項目へ同じ横幅を割り当てる */
  flex-direction:column; /* アイコンと文字を縦方向へ並べる */
  align-items:center; /* アイコンと文字を横方向の中央へ配置 */
  justify-content:center; /* アイコンと文字を縦方向の中央へ配置 */
  gap:6px; /* アイコンと文字の間隔を6pxに設定 */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:0; /* ボタンの標準枠線を削除 */
  background:transparent; /* ボタンの標準背景を透明にする */
  color:#6b7280; /* 通常状態のアイコンと文字の色 */
  font-family:inherit; /* ページと同じフォントを使用 */
  font-size:12px; /* メニュー名の文字サイズ */
  font-weight:700; /* メニュー名を太字で表示 */
  line-height:1.2; /* メニュー名の行間 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* クリックできるドロップダウンメニューボタン */
.footer-menu-dropdown_button{
  cursor:pointer; /* マウスを重ねた時にポインターを表示 */
}

/* ドロップダウンメニューを開いているボタン */
.footer-menu-dropdown_button.is-active{
  color:#2563eb; /* 選択中のアイコンと文字を青色へ変更 */
}

/* 固定フッターメニューのSVGアイコン */
.footer-menu-dropdown_item svg,
.footer-menu-dropdown_button svg{
  width:24px; /* アイコンの横幅 */
  height:24px; /* アイコンの高さ */
}

/* ボタンから表示するドロップダウンメニュー */
.footer-menu-dropdown_menu{
  position:absolute; /* 親ボタンを基準にメニューを配置 */
  left:50%; /* メニューの基準位置を親ボタン中央へ移動 */
  bottom:66px; /* 親ボタンの下端から66px上へ配置 */
  z-index:10; /* 固定フッターより手前へ表示 */
  width:170px; /* ドロップダウンメニューの横幅 */
  padding:10px; /* メニュー内側の余白 */
  border:1px solid #d1d5db; /* メニュー周囲へ1pxの枠線を表示 */
  border-radius:14px; /* メニュー四隅の角丸 */
  background:#ffffff; /* メニューの背景色 */
  box-shadow:0 10px 24px rgba(0,0,0,.15); /* メニューの下側へ影を付けて浮いて見せる */
  opacity:0; /* 閉じている時は透明にする */
  visibility:hidden; /* 閉じている時は操作できない状態にする */
  transform:translateX(-50%) translateY(10px); /* 中央位置を合わせ、閉じた状態では10px下へずらす */
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease; /* 0.25秒かけて表示状態を切り替える */
}

/* 開いているドロップダウンメニュー */
.footer-menu-dropdown_menu.is-open{
  opacity:1; /* メニューを不透明にして表示 */
  visibility:visible; /* メニューを操作できる状態にする */
  transform:translateX(-50%) translateY(0); /* 10pxのずれを戻して本来の位置へ表示 */
}

/* ドロップダウンメニュー内のリンク */
.footer-menu-dropdown_menu a{
  display:block; /* リンク全体をクリックできるブロックとして表示 */
  padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  border-radius:8px; /* 各リンクの四隅を8px丸める */
  color:#111827; /* リンクの文字色 */
  font-size:14px; /* リンクの文字サイズ */
  line-height:1.5; /* リンク文字の行間 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 2つ目以降のドロップダウンメニュー内リンク */
.footer-menu-dropdown_menu a + a{
  margin-top:4px; /* リンク同士の間に4pxの間隔を設定 */
}

/* ドロップダウンメニュー内リンクへマウスを重ねた状態 */
.footer-menu-dropdown_menu a:hover{
  background:#eff6ff; /* マウスを重ねたリンクの背景を薄い青色へ変更 */
}

/* 画面幅640px以下の表示 */
@media (max-width:640px){

  /* スマートフォン表示時のページタイトル */
  .footer-menu-dropdown_title{
    font-size:24px; /* タイトルの文字サイズを24pxへ変更 */
  }

  /* スマートフォン表示時のメインコンテンツ */
  .footer-menu-dropdown_main{
    padding:24px 18px 92px; /* 上24px・左右18px・下92pxの内側余白へ変更 */
  }

  /* スマートフォン表示時の固定フッターメニュー */
  .footer-menu-dropdown_nav{
    height:68px; /* 固定フッターメニューの高さを68pxへ変更 */
  }

  /* スマートフォン表示時の各メニュー */
  .footer-menu-dropdown_item,
  .footer-menu-dropdown_button{
    font-size:11px; /* メニュー名の文字サイズを11pxへ変更 */
  }

  /* スマートフォン表示時のSVGアイコン */
  .footer-menu-dropdown_item svg,
  .footer-menu-dropdown_button svg{
    width:22px; /* アイコンの横幅を22pxへ変更 */
    height:22px; /* アイコンの高さを22pxへ変更 */
  }

  /* スマートフォン表示時のドロップダウンメニュー */
  .footer-menu-dropdown_menu{
    bottom:58px; /* 高さ68pxの固定フッターに合わせて表示位置を調整 */
    width:150px; /* メニューの横幅を150pxへ変更 */
  }

}

// ドロップダウンメニューを持つすべてのボタンを取得
const footerMenuDropdownButtons = document.querySelectorAll('.footer-menu-dropdown_button');

// 取得した各ボタンへクリック処理を設定
footerMenuDropdownButtons.forEach(function(button){

  // ボタンがクリックされた時に処理を実行
  button.addEventListener('click', function(){

    // クリックしたボタン内のドロップダウンメニューを取得
    const menu = button.querySelector('.footer-menu-dropdown_menu');

    // クリックする前にメニューが開いていたかを確認
    const isOpen = menu.classList.contains('is-open');

    // すべてのボタンとメニューを一度閉じた状態へ戻す
    footerMenuDropdownButtons.forEach(function(item){

      // 選択中を表すis-activeクラスを削除
      item.classList.remove('is-active');

      // 各ボタン内のメニューからis-openクラスを削除
      item.querySelector('.footer-menu-dropdown_menu').classList.remove('is-open');

    });

    // クリックする前に閉じていた場合だけメニューを開く
    if(!isOpen){

      // クリックしたボタンへ選択中を表すクラスを追加
      button.classList.add('is-active');

      // 対応するドロップダウンメニューを表示
      menu.classList.add('is-open');

    }

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは画面下部に固定するフッターメニューと、「メニュー」「通知」から表示するドロップダウンメニューを作成します。CSSでは固定フッターの配置やメニューのデザイン、表示・非表示のアニメーションを設定し、JavaScriptでクリックしたボタンに対応するメニューを開閉します。

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

各ファイルの役割
index.htmlは固定フッターメニュー全体を構成するファイルです。「ホーム」「検索」「メニュー」「通知」「マイページ」の5項目と、「メニュー」「通知」をクリックしたときに表示するリンクを記述しています。メニュー名、SVGアイコン、ドロップダウンメニュー内の表示内容、リンク先を変更できます。

style.cssは固定フッターメニューとドロップダウンメニューのデザインを設定するファイルです。フッターの高さ、文字サイズ、アイコンサイズ、色、ドロップダウンメニューの横幅、余白、角丸、影、表示位置、開閉時のアニメーションなどを変更できます。

script.jsはドロップダウンメニューの開閉を制御するファイルです。「メニュー」または「通知」をクリックすると、クリックしたボタン内のメニューへis-openクラスを追加して表示します。開いているボタンにはis-activeクラスを追加し、別のボタンをクリックした場合は現在のメニューを閉じてから選択したメニューを表示します。同じボタンをもう一度クリックするとメニューを閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3つのファイルを配置したあと、sample/index.htmlをブラウザで開いてください。画面下部の「メニュー」または「通知」をクリックすると、それぞれのボタンに設定したドロップダウンメニューが表示されます。

実際のWebサイトで使用する場合は、index.html内のhref="#"を移動先のURLへ変更してください。「カテゴリ一覧」「人気記事」「新着記事」「未読通知」などの表示内容も、用途に合わせて変更できます。

カスタマイズできる内容
index.htmlでは固定フッターメニューの項目名、リンク先、SVGアイコン、ドロップダウンメニュー内のリンク名やリンク先を変更できます。「メニュー」と「通知」にはそれぞれ異なる内容を設定できるため、用途に合わせて表示するリンクを変更できます。

style.cssでは固定フッターメニューの高さ、文字色、文字サイズ、アイコンサイズ、ドロップダウンメニューの横幅、背景色、枠線、角丸、影、表示位置、リンク間隔、開閉アニメーションの速度などを変更できます。

数値調整
style.css
padding-bottom:76px;
固定フッターメニューとページ内容が重ならないように確保する下側の余白です。固定フッターメニューの高さを変更する場合は、この値も合わせて調整します。

padding:20px;
ページ上部の内側余白です。値を大きくするとタイトル周辺の余白が広がり、小さくすると狭くなります。

font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくするとコンパクトになります。

margin:8px 0 0;
タイトルと説明文の間隔です。8pxを大きくすると間隔が広がり、小さくすると近くなります。

font-size:13px;
ページ上部に表示する説明文の文字サイズです。値を大きくすると文字が大きくなります。

min-height:900px;
メインコンテンツの最低高さです。値を大きくするとページの縦方向の表示領域が長くなり、小さくすると短くなります。

padding:28px 24px 100px;
メインコンテンツの内側余白です。上28px・左右24px・下100pxを設定しています。各値を変更すると内容と画面端との間隔が変わります。

margin:0 0 28px;
各説明ブロックの下側の間隔です。28pxを大きくするとブロック同士の間隔が広がり、小さくすると狭くなります。

font-size:20px;
説明ブロックの見出し文字サイズです。値を大きくすると文字が大きくなります。

font-size:14px;
説明ブロック本文の文字サイズです。値を大きくすると本文が大きくなります。

height:76px;
固定フッターメニューの高さです。値を大きくするとフッターが高くなり、小さくすると低くなります。変更する場合はbodyのpadding-bottom:76px;も合わせて調整します。

gap:6px;
固定フッターメニュー内のアイコンと文字の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

font-size:12px;
固定フッターメニューの文字サイズです。値を大きくするとメニュー名が大きくなります。

width:24px;・height:24px;
固定フッターメニューで使用するSVGアイコンの大きさです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。

bottom:66px;
ドロップダウンメニューの表示位置です。値を大きくするとメニューが上へ移動し、小さくすると固定フッターへ近づきます。

width:170px;
ドロップダウンメニューの横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:10px;
ドロップダウンメニュー全体の内側余白です。値を大きくするとリンクと外枠の間隔が広がります。

border-radius:14px;
ドロップダウンメニュー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 10px 24px rgba(0,0,0,.15);
ドロップダウンメニューの影です。10pxは縦方向の位置、24pxはぼかしの大きさです。値を変更すると影の位置や広がりを調整できます。

translateY(10px)
閉じている状態のドロップダウンメニューを10px下へずらす設定です。表示時はtranslateY(0)へ移動します。値を大きくすると開閉時の移動距離が大きくなります。

.25s
ドロップダウンメニューが表示・非表示へ切り替わるアニメーション時間です。値を大きくするとゆっくり、小さくすると速く切り替わります。

padding:10px 12px;
ドロップダウンメニュー内の各リンクの内側余白です。上下10px・左右12pxを設定しています。値を大きくするとリンクのクリック領域も広がります。

border-radius:8px;
ドロップダウンメニュー内の各リンクの角丸です。値を大きくすると丸みが強くなります。

margin-top:4px;
ドロップダウンメニュー内のリンク同士の間隔です。値を大きくするとリンク同士の間隔が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%によって固定フッターメニューを画面幅いっぱいに表示し、画面幅640px以下では固定フッターの高さを68px、メニュー名を11px、SVGアイコンを22pxへ変更します。ドロップダウンメニューもbottom:58px、width:150pxへ調整するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。