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

フッターメニュー

クリックしたメニューの色を切り替える固定フッターメニューの作り方

クリックしたメニューの色を切り替える固定フッターメニューの作り方を紹介します。本記事では、HTML、CSS、JavaScriptを使って、クリックしたメニューだけ色を変更できる固定フッターメニューを作成します。現在選択しているメニューが一目で分かるため、アプリ風デザインやシングルページサイトにもおすすめです。

このサンプルコードでは、クリックしたメニューへ active クラスを付け替え、アイコンと文字の色を変更します。JavaScriptでクラスを切り替えるだけなので、シンプルなコードで実装できます。

固定フッターメニューは、ホーム・検索・お気に入り・通知・マイページなどの主要メニューを画面下部へ固定表示できる便利なナビゲーションです。クリックしたメニューを強調表示することで、どのメニューを選択しているか分かりやすいUIを実現できます。

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

デモ

固定フッターメニュー

クリックしたメニューだけ色が切り替わります。

ホーム

下のメニューをクリックすると、選択中の色が切り替わります。

検索

JavaScriptでクリックしたメニューにだけクラスを付けています。

お気に入り

選択中のメニューが一目で分かる固定フッターメニューです。

is-active クラスをJavaScriptで付け替えると、クリックしたメニューだけ色を切り替えられます。

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

<!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="click-active-footer-menu_wrap">

    <!-- タイトル -->
    <h1 class="click-active-footer-menu_title">
      クリックしたメニューの色を切り替える固定フッターメニュー
    </h1>

    <!-- コンテンツ -->
    <main class="click-active-footer-menu_content">

      <p>
        下のフッターメニューをクリックすると、選択中のメニューだけ色が切り替わります。
      </p>

    </main>

  </div>

  <!-- 固定フッターメニュー -->
  <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">
        <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">
        <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">
        <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">
        <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">
        <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>

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

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML、CSS、JavaScriptを別ファイルで管理します。HTMLでフッターメニューを作成し、CSSでデザインを設定し、JavaScriptでクリックしたメニューだけ色が切り替わる処理を実装します。 

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。JavaScriptではクリックしたメニューから is-active クラスを削除し、クリックしたメニューへ is-active クラスを追加することで、選択中のメニューだけ色を切り替えています。

コメント