クリックしたメニューを選択状態に切り替える固定フッターメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

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

クリックしたメニューを選択状態に切り替える固定フッターメニューの作り方

画面下部に固定したフッターメニューで、クリックした項目を選択状態に切り替える方法を紹介します。ホーム・検索・お気に入り・通知・マイページの5つのメニューを配置し、現在選択している項目だけを青色で表示します。

JavaScriptでクリックされたメニューにis-activeクラスを付け、ほかのメニューからはクラスを削除します。マウスを乗せている間だけ色が変わるホバー表示とは異なり、クリック後も選択したメニューの色が維持され、別のメニューをクリックすると選択状態が切り替わります。

スマートフォン向けサイトの固定ナビゲーションや、会員サイト・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>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ページ上部 -->
  <header class="click-active-footer-menu_header">
    <div class="click-active-footer-menu_title">固定フッターメニュー</div>
    <p class="click-active-footer-menu_description">メニューをクリックすると選択状態が切り替わります。</p>
  </header>

  <!-- ページ本文 -->
  <main class="click-active-footer-menu_main">

    <!-- 選択状態の説明 -->
    <div class="click-active-footer-menu_card">
      <div class="click-active-footer-menu_heading">選択状態を表示</div>
      <p>現在選択しているメニューだけを青色で表示します。</p>
    </div>

    <!-- 状態維持の説明 -->
    <div class="click-active-footer-menu_card">
      <div class="click-active-footer-menu_heading">クリック後も色を維持</div>
      <p>マウスを離しても、選択したメニューの色はそのまま維持されます。</p>
    </div>

    <!-- 切り替え動作の説明 -->
    <div class="click-active-footer-menu_card">
      <div class="click-active-footer-menu_heading">別のメニューへ切り替え</div>
      <p>別のメニューをクリックすると、選択状態が新しいメニューへ移動します。</p>
    </div>

  </main>

  <!-- 画面下部に固定するフッターメニュー -->
  <nav class="click-active-footer-menu_nav">

    <!-- ホーム -->
    <a href="#" class="click-active-footer-menu_item is-active">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 10L12 3L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6 10V20H18V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>ホーム</span>
    </a>

    <!-- 検索 -->
    <a href="#" class="click-active-footer-menu_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <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>

    <!-- お気に入り -->
    <a href="#" class="click-active-footer-menu_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 20L5 13C3.5 11.5 3.5 9 5 7.5C6.5 6 9 6 10.5 7.5L12 9L13.5 7.5C15 6 17.5 6 19 7.5C20.5 9 20.5 11.5 19 13L12 20Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
      </svg>
      <span>お気に入り</span>
    </a>

    <!-- 通知 -->
    <a href="#" class="click-active-footer-menu_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <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" stroke-linejoin="round"></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>
    </a>

    <!-- マイページ -->
    <a href="#" class="click-active-footer-menu_item">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <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" stroke-linecap="round"></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; /* 固定フッターメニューと本文が重ならないように下部へ余白を確保 */
  background:#f8fafc;
  color:#111827;
  font-family:sans-serif;
}

/* ページ上部 */
.click-active-footer-menu_header{
  padding:20px; /* ヘッダー内側の余白 */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下部の境界線 */
  background:#ffffff;
  text-align:center;
}

/* ページタイトル */
.click-active-footer-menu_title{
  margin:0;
  color:#111827;
  font-size:28px; /* タイトルの文字サイズ */
  font-weight:700;
}

/* ページ説明文 */
.click-active-footer-menu_description{
  margin:8px 0 0; /* タイトルとの間隔 */
  color:#4b5563;
  font-size:13px; /* 説明文の文字サイズ */
  line-height:1.7; /* 説明文の行間 */
}

/* メインコンテンツ */
.click-active-footer-menu_main{
  min-height:720px; /* スクロールを確認しやすくするための最低高さ */
  padding:28px 24px; /* 本文内側の余白 */
}

/* 説明ブロック */
.click-active-footer-menu_card{
  margin-bottom:28px; /* 各説明ブロックの間隔 */
}

/* 最後の説明ブロック */
.click-active-footer-menu_card:last-child{
  margin-bottom:0;
}

/* 説明ブロックの見出し */
.click-active-footer-menu_heading{
  margin:0 0 8px; /* 見出しと本文の間隔 */
  color:#111827;
  font-size:20px; /* 見出しの文字サイズ */
  font-weight:700;
}

/* 説明ブロックの本文 */
.click-active-footer-menu_card p{
  margin:0;
  color:#4b5563;
  font-size:14px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
}

/* 画面下部に固定するフッターメニュー */
.click-active-footer-menu_nav{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:1000;
  display:flex;
  width:100%;
  border-top:1px solid #d1d5db; /* メニュー上部の境界線 */
  background:#ffffff;
}

/* 各メニュー */
.click-active-footer-menu_item{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px; /* アイコンと文字の間隔 */
  height:76px; /* 固定フッターメニューの高さ */
  color:#9ca3af; /* 選択されていないメニューの色 */
  font-size:12px; /* メニュー文字のサイズ */
  font-weight:700;
  text-decoration:none;
  transition:color 0.2s ease; /* 色が切り替わる時間 */
}

/* 選択中のメニュー */
.click-active-footer-menu_item.is-active{
  color:#2563eb; /* 選択中のメニューの色 */
}

/* メニューアイコン */
.click-active-footer-menu_item svg{
  width:24px; /* アイコンの横幅 */
  height:24px; /* アイコンの高さ */
}

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

  /* メインコンテンツ */
  .click-active-footer-menu_main{
    padding:24px 18px; /* スマートフォン表示時の本文余白 */
  }

  /* ページタイトル */
  .click-active-footer-menu_title{
    font-size:24px; /* スマートフォン表示時のタイトルサイズ */
  }

  /* 各メニュー */
  .click-active-footer-menu_item{
    height:68px; /* スマートフォン表示時のメニュー高さ */
    font-size:11px; /* スマートフォン表示時の文字サイズ */
  }

  /* メニューアイコン */
  .click-active-footer-menu_item svg{
    width:22px; /* スマートフォン表示時のアイコン横幅 */
    height:22px; /* スマートフォン表示時のアイコン高さ */
  }
}

// 固定フッターメニューをすべて取得
const clickActiveFooterMenuItems = document.querySelectorAll('.click-active-footer-menu_item');

// 各メニューにクリックイベントを設定
clickActiveFooterMenuItems.forEach(function(item){

  // メニューをクリックしたときの処理
  item.addEventListener('click',function(event){

    // サンプルではリンクによるページ移動を停止
    event.preventDefault();

    // すべてのメニューから選択状態を削除
    clickActiveFooterMenuItems.forEach(function(menu){
      menu.classList.remove('is-active');
    });

    // クリックしたメニューだけを選択状態にする
    item.classList.add('is-active');

  });

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではホーム、検索、お気に入り、通知、マイページの5つの固定フッターメニューを配置し、CSSでは画面下部への固定表示、通常時と選択時の色、メニューやアイコンのサイズを設定します。JavaScriptではクリックした項目へis-activeクラスを付け替え、選択中のメニューだけを青色で表示します。

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

各ファイルの役割
index.htmlはページ上部、本文、固定フッターメニューを構成するファイルです。「ホーム」「検索」「お気に入り」「通知」「マイページ」のメニュー名、SVGアイコン、リンク先、表示順を変更できます。初期状態では「ホーム」にis-activeクラスを付け、選択状態で表示しています。

style.cssはページ全体と固定フッターメニューのデザインを設定するファイルです。フッターメニューをposition:fixedで画面下部へ固定し、width:100%で画面幅いっぱいに表示します。通常時のメニューは#9ca3af、is-activeクラスが付いた選択中のメニューは#2563ebで表示します。

script.jsはクリックしたメニューの選択状態を切り替えるファイルです。メニューがクリックされると、最初にすべての項目からis-activeクラスを削除し、そのあとクリックした項目だけへis-activeクラスを追加します。これにより、同時に選択状態になるメニューは1つだけになります。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルを配置したあとにsample/index.htmlをブラウザで開くと動作を確認できます。

ページを開いた直後は「ホーム」が青色で表示されています。「検索」「お気に入り」「通知」「マイページ」のいずれかをクリックすると、それまで選択されていた項目から青色が外れ、クリックした項目が青色になります。別のメニューをクリックするまで、その項目にはis-activeクラスが付いた状態が維持されます。

このサンプルでは選択状態の切り替えを同じページ内で確認するため、script.jsのevent.preventDefault()でリンクによるページ移動を停止しています。実際のページへのナビゲーションとして使用する場合は、index.htmlの各href="#"を移動先のURLへ変更し、script.jsのevent.preventDefault()を削除してください。

カスタマイズできる内容
index.htmlでは、5つのメニュー名、リンク先、SVGアイコン、表示順を変更できます。最初に選択状態で表示する項目を変更する場合は、「ホーム」に付いているis-activeクラスを削除し、初期選択したいメニューへ付け替えます。

style.cssでは、color:#9ca3af;で選択されていないメニューの色、color:#2563eb;で選択中のメニューの色を変更できます。また、固定フッターメニューの高さ、アイコンと文字の間隔、文字サイズ、SVGアイコンのサイズ、色が切り替わる時間も調整できます。

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

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

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

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

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

line-height:1.7;
ページ上部にある説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

min-height:720px;
メインコンテンツの最低高さです。値を大きくすると本文領域が高くなり、小さくすると低くなります。

padding:28px 24px;
メインコンテンツの内側余白です。28pxが上下、24pxが左右の余白です。値を大きくすると内容と画面端との間隔が広がります。

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

margin:0 0 8px;
説明ブロックの見出しと本文の間隔です。8pxを大きくすると間隔が広がり、小さくすると狭くなります。

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

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

line-height:1.8;
説明ブロック本文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

z-index:1000;
固定フッターメニューの重なり順です。値が大きい要素ほど手前へ表示されます。ほかの固定要素と重なる場合に調整できます。

gap:6px;
SVGアイコンとメニュー名の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

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

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

transition:color 0.2s ease;
通常状態と選択状態の色が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

width:24px;・height:24px;
SVGアイコンの横幅と高さです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの固定フッターメニューへwidth:100%を指定しているため、画面幅に合わせて横幅いっぱいに表示されます。各メニューにはflex:1を指定しているため、ホーム、検索、お気に入り、通知、マイページの5項目が利用できる横幅へ均等に配置されます。

画面幅が640px以下になると、メインコンテンツの余白を24px 18px、ページタイトルを24px、各メニューの高さを68px、文字サイズを11px、SVGアイコンの横幅と高さを22pxへ変更します。スマートフォン・タブレット・PCの画面幅に合わせて固定フッターメニューを表示できます。