ドロップダウンメニュー付きヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ヘッダー

ドロップダウンメニュー付きヘッダーを作る方法

ドロップダウンメニュー付きヘッダーを作る方法を紹介します。ヘッダー内のメニューをクリックすると、関連する項目を一覧表示できるドロップダウンメニューを実装します。通常時はヘッダーをすっきりと見せながら、必要なタイミングだけメニューを展開できるため、多くのWebサイトで採用されているレイアウトです。

このサンプルでは、HTML、CSS、JavaScriptを使って、クリックで開閉できるドロップダウンメニュー付きヘッダーを作成します。メニューをクリックすると子メニューが表示され、もう一度クリックすると閉じるシンプルな構成です。JavaScriptによる開閉処理を採用しているため、初心者でも動作の仕組みを理解しやすい内容になっています。

メニュー名、子メニューの項目、背景色、文字色、余白、角丸などは自由に変更できます。企業サイト、サービスサイト、ブログ、ポートフォリオなど、階層メニューを分かりやすく整理したい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="dropdown-menu-header_header">

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

    <!-- ナビメニュー -->
    <nav class="dropdown-menu-header_nav" aria-label="メニュー">

      <a class="dropdown-menu-header_link" href="#">ホーム</a>

      <div class="dropdown-menu-header_item">

        <button class="dropdown-menu-header_button" type="button" id="dropdown-menu-header-button">
          サービス ▼
        </button>

        <div class="dropdown-menu-header_menu" id="dropdown-menu-header-menu">
          <a href="#">Web制作</a>
          <a href="#">Web開発</a>
          <a href="#">保守・運用</a>
        </div>

      </div>

      <a class="dropdown-menu-header_link" href="#">ブログ</a>
      <a class="dropdown-menu-header_link" 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から調整できます。

コメント