複数カテゴリーを横並びに表示するドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

複数カテゴリーを横並びに表示するドロップダウンメニューを作る方法

複数カテゴリーを横並びに表示するドロップダウンメニューを作る方法を紹介します。このサンプルでは、「サービス一覧」ボタンをクリックすると横幅の広いメニューパネルが開き、「Web制作」「システム開発」「デザイン」「サポート」の4カテゴリーを横並びに表示します。それぞれのカテゴリーには複数のリンクを配置できるため、多くのページをカテゴリーごとに整理して案内できます。

コーポレートサイトのサービス一覧、制作会社の事業紹介、会員サイトの機能一覧、ECサイトの商品カテゴリーなど、関連するリンクを複数のグループへ分けて表示したい場面に利用できます。通常時はカテゴリー一覧を非表示にしておき、必要なときだけボタンから開けるため、多数のリンクを常に画面へ表示する必要がありません。各カテゴリーには見出しとリンクを配置しているので、利用者が目的の項目を探しやすい構成です。

HTMLではカテゴリー名、リンク名、リンク先を変更でき、CSSでは全体の横幅、余白、ボタンのデザイン、パネルの表示位置、カテゴリー間の間隔、列数、角丸、影などを調整できます。JavaScriptではボタンをクリックしたときにis-activeクラスを切り替えてパネルを開閉します。4カテゴリーを横並びにまとめて表示したい場合や、多数のリンクを整理したドロップダウンメニューを作りたい場合に利用できるサンプルです。

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

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

デモ

「サービス一覧」をクリックすると、4つのカテゴリーを横並びにしたドロップダウンメニューが表示されます。もう一度クリックすると閉じます。

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

<!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="large-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="large-dropdown-menu_title">
      複数カテゴリーを横並びに表示するドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="large-dropdown-menu_text">
      ボタンをクリックすると、複数のカテゴリーを横並びで一覧表示できます。
    </p>

    <!-- 開閉ボタンとメニューパネルをまとめるエリア -->
    <div class="large-dropdown-menu_nav">

      <!-- 開閉ボタン -->
      <button
        class="large-dropdown-menu_button"
        id="large-dropdown-menu-button"
        type="button">
        サービス一覧
      </button>

      <!-- ドロップダウンメニューパネル -->
      <div
        class="large-dropdown-menu_panel"
        id="large-dropdown-menu-panel">

        <!-- カテゴリーを横並びにするグリッド -->
        <div class="large-dropdown-menu_grid">

          <!-- Web制作カテゴリー -->
          <div class="large-dropdown-menu_column">
            <h3>Web制作</h3>
            <a href="#">ホームページ制作</a>
            <a href="#">LP制作</a>
            <a href="#">ECサイト制作</a>
            <a href="#">WordPress制作</a>
          </div>

          <!-- システム開発カテゴリー -->
          <div class="large-dropdown-menu_column">
            <h3>システム開発</h3>
            <a href="#">業務システム</a>
            <a href="#">予約システム</a>
            <a href="#">会員サイト</a>
            <a href="#">API開発</a>
          </div>

          <!-- デザインカテゴリー -->
          <div class="large-dropdown-menu_column">
            <h3>デザイン</h3>
            <a href="#">ロゴ制作</a>
            <a href="#">バナー制作</a>
            <a href="#">UIデザイン</a>
            <a href="#">印刷物制作</a>
          </div>

          <!-- サポートカテゴリー -->
          <div class="large-dropdown-menu_column">
            <h3>サポート</h3>
            <a href="#">保守管理</a>
            <a href="#">SEO対策</a>
            <a href="#">運用相談</a>
            <a href="#">お問い合わせ</a>
          </div>

        </div>

      </div>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ドロップダウンメニュー全体 */
.large-dropdown-menu_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:900px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.large-dropdown-menu_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.large-dropdown-menu_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 開閉ボタンとメニューパネルをまとめるエリア */
.large-dropdown-menu_nav{
  position:relative; /* メニューパネルを配置する基準にする */
}

/* 開閉ボタン */
.large-dropdown-menu_button{
  padding:14px 30px; /* 上下14px・左右30px。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を非表示 */
  border-radius:12px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:15px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* ドロップダウンメニューパネル */
.large-dropdown-menu_panel{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* 開閉ボタンの下へ重ねて表示 */
  top:60px; /* 上端から60pxの位置へ配置。値を大きくするとパネルが下へ移動する */
  left:0; /* 親要素の左端に揃える */
  z-index:10; /* 周囲の要素より手前へ表示 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:28px; /* パネルの内側余白。値を大きくすると余白が広がる */
  border:1px solid #d1d5db; /* パネルを囲む枠線 */
  border-radius:16px; /* パネルの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* パネルの背景色 */
  box-shadow:0 18px 40px rgba(15,23,42,.08); /* 18pxは下方向の影、40pxはぼかしの大きさ */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* メニューパネルを開いた状態 */
.large-dropdown-menu_panel.is-active{
  display:block; /* パネルを表示 */
}

/* カテゴリーを横並びにするグリッド */
.large-dropdown-menu_grid{
  display:grid; /* Grid Layoutを使用 */
  grid-template-columns:repeat(4,1fr); /* 4つのカテゴリーを同じ横幅で横並びにする */
  gap:24px; /* カテゴリー同士の間隔。値を大きくすると間隔が広がる */
}

/* カテゴリー見出し */
.large-dropdown-menu_column h3{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくするとリンクとの間隔が広がる */
  padding-bottom:8px; /* 見出し文字と下線の間隔。値を大きくすると間隔が広がる */
  border-bottom:2px solid #2563eb; /* カテゴリー見出し下部の線。2pxを大きくすると太くなる */
  font-size:16px; /* カテゴリー見出しの文字サイズ。値を大きくすると文字が大きくなる */
  color:#111827; /* カテゴリー見出しの文字色 */
}

/* カテゴリー内のリンク */
.large-dropdown-menu_column a{
  display:block; /* リンクを縦方向へ並べる */
  padding:8px 0; /* 上下8pxの余白。値を大きくするとリンク同士の間隔が広がる */
  color:#4b5563; /* リンクの文字色 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* リンクへマウスを重ねた状態 */
.large-dropdown-menu_column a:hover{
  color:#2563eb; /* マウスを重ねたリンクの文字色 */
}

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

  /* カテゴリーを2列へ変更 */
  .large-dropdown-menu_grid{
    grid-template-columns:repeat(2,1fr); /* 2カテゴリーずつ横並びにする */
  }

}

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

  /* ドロップダウンメニュー全体 */
  .large-dropdown-menu_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* カテゴリーを1列へ変更 */
  .large-dropdown-menu_grid{
    grid-template-columns:1fr; /* カテゴリーを縦1列にする */
    gap:18px; /* カテゴリー同士の間隔。値を大きくすると間隔が広がる */
  }

}

/* 開閉ボタンを取得 */
const largeDropdownMenuButton=document.getElementById(
  "large-dropdown-menu-button"
);

/* ドロップダウンメニューパネルを取得 */
const largeDropdownMenuPanel=document.getElementById(
  "large-dropdown-menu-panel"
);

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

  /*
    is-activeクラスを付け外しする。
    is-activeクラスが付くとメニューパネルが表示され、
    クラスが外れると非表示になる。
  */
  largeDropdownMenuPanel.classList.toggle("is-active");

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「サービス一覧」の開閉ボタンと、「Web制作」「システム開発」「デザイン」「サポート」の4カテゴリーを作成します。CSSでは4カテゴリーをGrid Layoutで横並びにし、JavaScriptではボタンをクリックしたときにis-activeクラスを切り替えてメニューパネルを開閉します。外部ライブラリは使用せず、HTML・CSS・バニラJavaScriptだけで動作します。

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

各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。「サービス一覧」の開閉ボタン、4つのカテゴリー見出し、それぞれのカテゴリーに属するリンクを配置しています。カテゴリー名、リンク名、リンク先はこのファイルから変更できます。

style.cssはドロップダウンメニューのデザインとカテゴリーの配置を設定するファイルです。メニューパネルを開閉ボタンの下へ配置し、grid-template-columns:repeat(4,1fr);によって4カテゴリーを同じ横幅で横並びにしています。また、画面幅700px以下では2列、480px以下では1列へ変更します。

script.jsはメニューパネルの開閉を制御するファイルです。開閉ボタンをクリックするたびにlarge-dropdown-menu_panelへis-activeクラスを付け外しし、CSSのdisplay:noneとdisplay:blockを切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、外部ライブラリを追加する必要はありません。

「サービス一覧」ボタンをクリックすると、ボタンの下にドロップダウンメニューが表示されます。PCなど横幅の広い画面では「Web制作」「システム開発」「デザイン」「サポート」の4カテゴリーが横並びになります。もう一度「サービス一覧」をクリックするとメニューパネルが閉じます。実際に使用する場合は、index.htmlの各href="#"を移動先のURLへ変更してください。

カスタマイズできる内容
index.htmlではタイトル、説明文、開閉ボタンの文字、カテゴリー名、各カテゴリー内のリンク名、リンク先を変更できます。カテゴリーを変更する場合はlarge-dropdown-menu_column単位で編集し、その中へカテゴリー見出しと必要なリンクを配置します。

style.cssでは全体の横幅や余白、ボタンの背景色、文字サイズ、角丸、メニューパネルの表示位置、背景色、影、カテゴリーの列数、カテゴリー同士の間隔などを変更できます。横並びのカテゴリー数はgrid-template-columnsから調整できます。

数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右の余白です。値を大きくすると画面端との間隔が広がります。

max-width:900px;
ドロップダウンメニュー全体の最大横幅です。値を大きくすると4カテゴリーを表示する領域が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置しています。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると開閉ボタンとの間隔が広がります。

padding:14px 30px;
「サービス一覧」ボタンの内側余白です。14pxが上下、30pxが左右の余白です。値を大きくするとボタンが大きくなります。

border-radius:12px;
開閉ボタンの角丸です。値を大きくすると丸みが強くなります。

font-size:15px;
開閉ボタンの文字サイズです。値を大きくすると文字が大きくなります。

top:60px;
メニューパネルの表示位置です。値を大きくするとパネルが下へ移動し、小さくすると開閉ボタンへ近づきます。

padding:28px;
メニューパネルの内側余白です。値を大きくするとカテゴリーとパネル外枠の間隔が広がります。

border-radius:16px;
メニューパネルの角丸です。値を大きくすると丸みが強くなります。

box-shadow:0 18px 40px ...
メニューパネルの影です。18pxは下方向の位置、40pxはぼかしの大きさです。値を変更すると影の位置や広がりを調整できます。

grid-template-columns:repeat(4,1fr);
PC表示時のカテゴリー列数です。4つのカテゴリーを同じ横幅で横並びにします。列数を変更する場合は4の値を変更します。

gap:24px;
カテゴリー同士の間隔です。値を大きくすると横並びのカテゴリー間隔が広がり、小さくすると狭くなります。

margin:0 0 12px;
カテゴリー見出しの下側余白です。12pxを大きくするとリンクとの間隔が広がります。

padding-bottom:8px;
カテゴリー見出しの文字と下線の間隔です。値を大きくすると間隔が広がります。

border-bottom:2px solid #2563eb;
カテゴリー見出し下部の線です。2pxを大きくすると線が太くなります。

font-size:16px;
カテゴリー見出しの文字サイズです。値を大きくすると見出しが大きくなります。

padding:8px 0;
各リンクの上下余白です。8pxを大きくするとリンク同士の間隔が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体にwidth:100%とmax-width:900pxを設定し、画面幅に合わせて全体が縮小するようにしています。通常はgrid-template-columns:repeat(4,1fr);で4カテゴリーを横並びに表示します。

画面幅700px以下ではgrid-template-columns:repeat(2,1fr);へ変更し、カテゴリーを2列で表示します。さらに画面幅480px以下ではgrid-template-columns:1fr;へ変更して1列表示にし、全体の内側余白もpadding:24px 18px;へ縮小します。これによりスマートフォン・タブレット・PCの画面幅に合わせてカテゴリーの並び方が切り替わります。