選択中のメニューに下線が付くヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ヘッダー

選択中のメニューに下線が付くヘッダーを作る方法

選択中のメニューに下線が付くヘッダーを作る方法を紹介します。ナビゲーションメニューをクリックしたときに、選択された項目だけ文字色を変えて下線を表示することで、現在どのメニューが選ばれているのか分かりやすくできます。シンプルなヘッダーに少し動きを加えたい場合に使いやすいデザインです。

このサンプルでは、HTML、CSS、JavaScriptを使って、クリックしたメニューへ下線を付ける処理を実装します。JavaScriptでクリックされたメニューを判定し、選択中を表すクラスを付け替えることで、CSSの文字色と下線デザインを切り替えます。

メニュー項目、下線の色、太さ、位置、文字色、余白などはCSSから変更できます。Webサイトのヘッダー、サービスサイトのナビゲーション、ポートフォリオサイトなどで、選択中のメニューを分かりやすく見せたい場合に活用できます。

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

デモ

現在選択中のメニュー： ホーム
メニューをクリックすると、選択した項目だけ青色と下線で強調表示されます。

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

<!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="active-underline-header_header">

    <!-- サイト名 -->
    <a class="active-underline-header_logo" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="active-underline-header_nav" aria-label="メニュー">
      <a href="#" class="is-active">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">ブログ</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </header>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイル、CSSファイル、JavaScriptファイルの3つで構成されています。HTMLファイルにヘッダーとナビゲーションを記述し、CSSファイルでメニューの下線や配色などのデザインを設定します。JavaScriptファイルではクリックしたメニューへ選択中を表すクラスを付け替え、下線を表示する処理を行います。 

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

ファイルを配置したらindex.htmlをブラウザで開いて動作を確認します。メニューをクリックすると、選択した項目だけに下線が表示されます。サイト名やメニュー項目はHTMLから変更でき、下線の色や太さ、文字色、ヘッダーの高さ、余白などはstyle.cssから調整できます。

コメント