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

複数列で表示するドロップダウンメニュー付きヘッダーを作る方法

複数列で表示するドロップダウンメニュー付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とナビゲーションメニューを配置したヘッダーに、複数のリンクを列ごとに整理して表示できるドロップダウンメニューを追加します。「サービス」の右側に配置したSVGの矢印アイコンを含むボタンをクリックすると、横幅の広いメニューがヘッダーの下に展開されます。

ドロップダウン内では「Web制作」「デザイン」「サポート」のように内容をグループごとに分け、それぞれの項目を複数列で表示します。リンク数が多い場合でもカテゴリーごとに整理しやすいため、企業サイトのサービス一覧、ECサイトの商品カテゴリー、各種コンテンツへのナビゲーションなどに利用できます。JavaScriptではボタンのクリックを検知してメニューの開閉状態を切り替え、表示状態に合わせてSVGの矢印アイコンも回転します。

サイト名、通常のナビゲーション、各列の見出しやリンクはHTMLから変更できます。CSSではヘッダーの余白や最大横幅、ドロップダウンメニューの横幅、列数、列同士の間隔、背景色、枠線、角丸、影などを調整できます。画面幅が狭くなると複数列のレイアウトを縦方向へ切り替えるレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

Sample Site

複数列のドロップダウンメニュー

「サービス」をクリックすると複数列のメニューが表示されます。

「サービス」をクリックしてください。「Web制作」「デザイン」「サポート」に分かれた複数列のドロップダウンメニューが表示され、もう一度クリックすると閉じます。

Q 他のアイコンを使いたい場合はどうするの？

無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。

SVGアイコン作成ツールを使う

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

<!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="multi-column-dropdown_header">

    <div class="multi-column-dropdown_inner">

      <!-- サイト名 -->
      <div class="multi-column-dropdown_logo">
        Sample Site
      </div>

      <!-- ナビゲーションメニュー -->
      <nav class="multi-column-dropdown_nav" aria-label="メインメニュー">

        <a href="#">ホーム</a>

        <!-- ドロップダウン -->
        <div class="multi-column-dropdown_dropdown">

          <!-- ドロップダウン開閉ボタン -->
          <button
            type="button"
            class="multi-column-dropdown_button"
            aria-expanded="false"
            aria-controls="multi-column-menu"
          >
            サービス

            <!-- 開閉状態を示すSVG矢印アイコン -->
            <svg
              class="multi-column-dropdown_icon"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path d="M6 9l6 6 6-6"></path>
            </svg>

          </button>

          <!-- 複数列で表示するドロップダウンメニュー -->
          <div
            class="multi-column-dropdown_menu"
            id="multi-column-menu"
          >

            <!-- Web制作 -->
            <div class="multi-column-dropdown_group">

              <p class="multi-column-dropdown_group-title">
                Web制作
              </p>

              <ul class="multi-column-dropdown_list">
                <li><a href="#">ホームページ制作</a></li>
                <li><a href="#">ランディングページ</a></li>
                <li><a href="#">サイトリニューアル</a></li>
              </ul>

            </div>

            <!-- デザイン -->
            <div class="multi-column-dropdown_group">

              <p class="multi-column-dropdown_group-title">
                デザイン
              </p>

              <ul class="multi-column-dropdown_list">
                <li><a href="#">Webデザイン</a></li>
                <li><a href="#">バナーデザイン</a></li>
                <li><a href="#">UIデザイン</a></li>
              </ul>

            </div>

            <!-- サポート -->
            <div class="multi-column-dropdown_group">

              <p class="multi-column-dropdown_group-title">
                サポート
              </p>

              <ul class="multi-column-dropdown_list">
                <li><a href="#">サイト運用</a></li>
                <li><a href="#">更新サポート</a></li>
                <li><a href="#">お問い合わせ</a></li>
              </ul>

            </div>

          </div>

        </div>

        <a href="#">会社概要</a>
        <a href="#">お問い合わせ</a>

      </nav>

    </div>

  </header>

  <!-- ページ内容 -->
  <main class="multi-column-dropdown_content">

    <p class="multi-column-dropdown_content-title">
      複数列のドロップダウンメニュー
    </p>

    <p class="multi-column-dropdown_content-text">
      「サービス」をクリックすると複数列のメニューが表示されます。
    </p>

  </main>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  background:#f3f4f6; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ページ全体で使用するフォント */
}

/* ヘッダー */
.multi-column-dropdown_header{
  width:100%; /* ヘッダーを画面幅いっぱいに表示 */
  padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダー内の余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下部の枠線。1pxを大きくすると線が太くなる */
  background:#ffffff; /* ヘッダーの背景色 */
  box-shadow:0 4px 18px rgba(15,23,42,.05); /* 4pxは影の縦位置、18pxはぼかし。値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* ヘッダー内部 */
.multi-column-dropdown_inner{
  display:flex; /* サイト名とナビゲーションを横並びにする */
  align-items:center; /* 各要素を上下中央へ揃える */
  justify-content:space-between; /* サイト名とナビゲーションを左右へ配置 */
  gap:40px; /* サイト名とナビゲーションの間隔。値を大きくすると間隔が広がる */
  width:100%; /* 使用できる横幅いっぱいに表示 */
  max-width:1200px; /* ヘッダー内部の最大横幅。値を大きくすると横に広がる */
  margin:0 auto; /* ヘッダー内部を左右中央へ配置 */
}

/* サイト名 */
.multi-column-dropdown_logo{
  flex:0 0 auto; /* サイト名の幅を内容に合わせる */
  color:#111827; /* サイト名の文字色 */
  font-size:20px; /* サイト名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* サイト名を太字にする */
  line-height:1.4; /* サイト名の行間。値を大きくすると行の高さが広がる */
}

/* ナビゲーション */
.multi-column-dropdown_nav{
  display:flex; /* メニューを横並びにする */
  align-items:center; /* メニューを上下中央へ揃える */
  gap:8px 24px; /* 縦8px・横24px。値を大きくするとメニュー間が広がる */
  margin-left:auto; /* ナビゲーションを右側へ寄せる */
}

/* 通常のメニューリンク */
.multi-column-dropdown_nav > a:link,
.multi-column-dropdown_nav > a:visited{
  color:#374151; /* メニューの文字色 */
  background:transparent; /* メニューの背景を透明にする */
  font-size:14px; /* メニューの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* メニュー文字の太さ */
  line-height:1.5; /* メニュー文字の行間。値を大きくすると行の高さが広がる */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 通常のメニューリンク操作時 */
.multi-column-dropdown_nav > a:hover,
.multi-column-dropdown_nav > a:focus,
.multi-column-dropdown_nav > a:active{
  color:#2563eb; /* 操作時の文字色 */
  background:transparent; /* 操作時も背景を透明にする */
  text-decoration:none; /* 操作時も下線を非表示 */
}

/* ドロップダウン全体 */
.multi-column-dropdown_dropdown{
  position:relative; /* ドロップダウンメニューの配置基準にする */
}

/* 開閉ボタン */
.multi-column-dropdown_button{
  display:flex; /* 文字とSVGを横並びにする */
  align-items:center; /* 文字とSVGを上下中央へ揃える */
  gap:6px; /* 文字とSVGの間隔。値を大きくすると間隔が広がる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:0; /* ブラウザ標準の枠線を削除 */
  background:transparent; /* ボタン背景を透明にする */
  color:#374151; /* 文字とSVGの基本色 */
  font-family:inherit; /* ページと同じフォントを使用 */
  font-size:14px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* 文字を太くする */
  line-height:1.5; /* 行間。値を大きくすると行の高さが広がる */
  cursor:pointer; /* マウスポインターを指の形にする */
}

/* 開閉ボタン操作時 */
.multi-column-dropdown_button:hover,
.multi-column-dropdown_button:focus{
  color:#2563eb; /* 操作時の文字とSVGの色 */
}

/* SVG矢印アイコン */
.multi-column-dropdown_icon{
  display:block; /* SVG下部の余白を防ぐ */
  width:16px; /* SVGの横幅。値を大きくするとアイコンが大きくなる */
  height:16px; /* SVGの高さ。値を大きくするとアイコンが大きくなる */
  transition:transform .3s ease; /* .3秒で回転。値を大きくするとゆっくり回転する */
}

/* SVG矢印の線 */
.multi-column-dropdown_icon path{
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンのcolorをSVGの線色として使用 */
  stroke-width:2; /* SVGの線幅。値を大きくすると線が太くなる */
  stroke-linecap:round; /* SVG線の端を丸くする */
  stroke-linejoin:round; /* SVG線の接続部分を丸くする */
}

/* 開いているときのSVG */
.multi-column-dropdown_dropdown.is-open .multi-column-dropdown_icon{
  transform:rotate(180deg); /* 180度回転して開いている状態を示す */
}

/* ドロップダウンメニュー */
.multi-column-dropdown_menu{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* ヘッダーの高さへ影響させず配置 */
  top:calc(100% + 14px); /* ボタン下から14px離す。値を大きくすると下へ離れる */
  right:0; /* メニュー右端を開閉ボタン側へ揃える */
  z-index:10; /* 通常のページ内容より前面へ表示 */
  width:620px; /* メニューの横幅。値を大きくすると横へ広がる */
  padding:24px; /* メニュー内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 枠線。1pxを大きくすると線が太くなる */
  border-radius:12px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* メニューの背景色 */
  box-shadow:0 16px 36px rgba(15,23,42,.14); /* 16pxは影の縦位置、36pxはぼかし。値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* メニューを開いた状態 */
.multi-column-dropdown_dropdown.is-open .multi-column-dropdown_menu{
  display:grid; /* 開いたときにグリッドで表示 */
  grid-template-columns:repeat(3,1fr); /* 3列で均等に表示。3を変更すると列数を変更できる */
  gap:24px; /* 各列の間隔。値を大きくすると列同士が離れる */
}

/* 各グループ */
.multi-column-dropdown_group{
  min-width:0; /* 内容による横幅のはみ出しを防ぐ */
}

/* グループ見出し */
.multi-column-dropdown_group-title{
  margin:0 0 10px; /* 下側10pxの余白。値を大きくするとリンクとの間隔が広がる */
  color:#111827; /* 見出しの文字色 */
  font-size:14px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 見出しを太字にする */
  line-height:1.5; /* 行間。値を大きくすると行の高さが広がる */
}

/* リンク一覧 */
.multi-column-dropdown_list{
  margin:0; /* ul要素の標準外側余白を削除 */
  padding:0; /* ul要素の標準内側余白を削除 */
  list-style:none; /* リストの黒丸を非表示 */
}

/* リスト項目 */
.multi-column-dropdown_list li{
  margin:0; /* リスト項目の外側余白を削除 */
  padding:0; /* リスト項目の内側余白を削除 */
}

/* ドロップダウン内のリンク */
.multi-column-dropdown_list a:link,
.multi-column-dropdown_list a:visited{
  display:block; /* リンク全体をクリック領域にする */
  padding:8px 0; /* 上下8pxの余白。値を大きくするとクリック領域が高くなる */
  color:#4b5563; /* リンクの文字色 */
  background:transparent; /* リンク背景を透明にする */
  font-size:14px; /* リンクの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:500; /* リンク文字の太さ */
  line-height:1.5; /* 行間。値を大きくすると行の高さが広がる */
  text-decoration:none; /* 下線を非表示 */
}

/* ドロップダウン内のリンク操作時 */
.multi-column-dropdown_list a:hover,
.multi-column-dropdown_list a:focus,
.multi-column-dropdown_list a:active{
  color:#2563eb; /* 操作時の文字色 */
  background:transparent; /* 操作時も背景を透明にする */
  text-decoration:none; /* 操作時も下線を非表示 */
}

/* ページ内容 */
.multi-column-dropdown_content{
  padding:80px 24px; /* 上下80px・左右24px。値を大きくすると余白が広がる */
  text-align:center; /* 内容を中央揃えにする */
}

/* ページタイトル */
.multi-column-dropdown_content-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.4; /* 行間。値を大きくすると行の高さが広がる */
}

/* ページ説明 */
.multi-column-dropdown_content-text{
  margin:0; /* 標準の外側余白を削除 */
  color:#6b7280; /* 説明文の文字色 */
  font-size:15px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* 画面幅768px以下 */
@media (max-width:768px){

  /* ヘッダー */
  .multi-column-dropdown_header{
    padding:24px 20px; /* 上下24px・左右20px。狭い画面で余白を抑える */
  }

  /* ヘッダー内部 */
  .multi-column-dropdown_inner{
    flex-direction:column; /* サイト名とナビゲーションを縦方向へ配置 */
    align-items:flex-start; /* 各要素を左揃えにする */
    gap:24px; /* 縦方向の間隔。値を大きくすると間隔が広がる */
  }

  /* ナビゲーション */
  .multi-column-dropdown_nav{
    flex-wrap:wrap; /* 横幅が不足した場合に折り返す */
    gap:12px 20px; /* 縦12px・横20px。値を変更するとメニュー間隔が変わる */
    margin-left:0; /* PC表示の右寄せを解除 */
  }

  /* ドロップダウンメニュー */
  .multi-column-dropdown_menu{
    left:0; /* 親要素の左端を基準に配置 */
    right:auto; /* PC表示の右揃えを解除 */
    width:min(620px,calc(100vw - 40px)); /* 最大620px、画面端には左右20pxずつ余白を確保 */
  }

  /* 開いたドロップダウンメニュー */
  .multi-column-dropdown_dropdown.is-open .multi-column-dropdown_menu{
    grid-template-columns:1fr; /* 狭い画面では1列へ変更 */
    gap:20px; /* 各グループの縦方向の間隔。値を大きくすると間隔が広がる */
  }

}

/* ドロップダウン全体を取得 */
const multiColumnDropdown =
  document.querySelector('.multi-column-dropdown_dropdown');

/* ドロップダウン開閉ボタンを取得 */
const multiColumnDropdownButton =
  document.querySelector('.multi-column-dropdown_button');

/* 開閉ボタンをクリックしたときの処理 */
multiColumnDropdownButton.addEventListener('click', function(){

  /* is-openクラスを付け外ししてメニューを開閉 */
  const multiColumnDropdownIsOpen =
    multiColumnDropdown.classList.toggle('is-open');

  /* 開閉状態をaria-expandedへ反映 */
  multiColumnDropdownButton.setAttribute(
    'aria-expanded',
    multiColumnDropdownIsOpen ? 'true' : 'false'
  );

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではサイト名、通常のナビゲーション、サービスメニュー、複数列のドロップダウンメニューを構成します。CSSではヘッダーやドロップダウンメニューの配置・余白・色・角丸・影・レスポンシブ表示を設定し、JavaScriptでは「サービス」をクリックしたときのメニューの開閉を制御します。

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

各ファイルの役割
index.htmlはヘッダー全体を構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーションと、「Web制作」「デザイン」「サポート」の3列に分けたドロップダウンメニューを記述しています。各列の見出しやリンク名、リンク先は用途に合わせて変更できます。

style.cssはヘッダーとドロップダウンメニューのデザインを設定するファイルです。ヘッダーの横幅や余白、ナビゲーションの間隔、ドロップダウンメニューの横幅・配置・余白・角丸・影、各列の配置などを調整できます。画面幅に合わせたレスポンシブ表示もこのファイルで設定します。

script.jsはドロップダウンメニューの開閉を制御するファイルです。「サービス」をクリックするとメニューを表示し、もう一度クリックすると閉じる動作を実行します。開閉状態に合わせてボタンの状態も切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ヘッダーの「サービス」をクリックすると、「Web制作」「デザイン」「サポート」に分かれた複数列のドロップダウンメニューが表示されます。もう一度「サービス」をクリックするとメニューが閉じます。

カスタマイズできる内容
index.htmlでは「Sample Site」のサイト名、ヘッダーに表示するナビゲーション、ドロップダウンメニュー内の列見出し、各リンクの表示名とリンク先を変更できます。「Web制作」「デザイン」「サポート」の内容も、実際のサイト構成に合わせて書き換えられます。

style.cssではヘッダーの余白、最大横幅、ナビゲーションの間隔、文字サイズ、文字色、ドロップダウンメニューの配置、横幅、内側余白、列同士の間隔、背景色、枠線、角丸、影などを変更できます。また、開閉ボタンに使用しているSVGアイコンのサイズや色、開閉時の回転表示も調整できます。

数値調整
style.css
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。

max-width:1200px;
ヘッダー内部の最大横幅です。値を大きくするとサイト名とナビゲーションを配置できる範囲が広がり、小さくすると中央へまとまった表示になります。

gap:40px;
ヘッダー内部の要素同士の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

top:calc(100% + 14px);
ヘッダーのナビゲーションとドロップダウンメニューの上下間隔です。14pxを大きくするとメニューが下へ離れ、小さくするとナビゲーションへ近づきます。

transition:.3s;
SVGアイコンなどの状態が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

transform:rotate(180deg);
ドロップダウンメニューを開いたときのSVGアイコンの回転角度です。180degで上下方向が反転します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxにより、ヘッダー内部が画面幅に合わせて調整されます。また、@media (max-width:768px)ではヘッダーの余白を小さくし、サイト名とナビゲーションを縦方向へ配置して、メニュー項目が画面幅に収まるように調整します。スマートフォン・タブレット・PCで利用できます。