3階層まで展開できるドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

3階層まで展開できるドロップダウンメニューを作る方法

3階層まで展開できるドロップダウンメニューをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、最初に「メニュー」ボタンをクリックすると親項目が表示され、親項目をクリックすると子項目、さらに子項目をクリックするとその下の項目まで順番に展開できます。「商品 → パソコン → ノートPC」のように、関連するメニューを階層ごとに整理して表示できます。

項目数が多いナビゲーションでは、すべてのリンクを最初から表示するとメニューが長くなり、目的の項目を探しにくくなる場合があります。階層ごとに必要な項目だけを開けるようにすると、「商品」「サービス」などの大きな分類から、より細かな項目へ順番に移動できます。商品カテゴリー、サービス一覧、管理画面のメニューなど、親子関係のある項目を整理したい場合に利用できます。

HTMLでは親項目・子項目・リンクを階層構造で配置し、CSSでは階層ごとに背景色や左側の余白を変えて違いを分かりやすくしています。JavaScriptでは「メニュー」「親項目」「子項目」のクリックをそれぞれ取得し、対応する要素へis-activeクラスを付け外しして開閉します。ライブラリを使用せず、HTML・CSS・バニラJavaScriptだけで実装できます。

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

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

デモ

「メニュー」を開き、「商品」→「パソコン」の順番にクリックすると、その下のリンクまで展開できます。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>3階層まで展開できるドロップダウンメニュー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ドロップダウンメニュー全体 -->
  <div class="three-level-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="three-level-dropdown-menu_title">
      3階層まで展開できるドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="three-level-dropdown-menu_text">
      メニュー、親項目、子項目を順番にクリックすると3階層まで展開できます。
    </p>

    <!-- ドロップダウンメニュー -->
    <div class="three-level-dropdown-menu_box">

      <!-- メニュー全体の開閉ボタン -->
      <button class="three-level-dropdown-menu_button" id="three-level-dropdown-menu-button" type="button">
        メニュー
      </button>

      <!-- メニューパネル -->
      <div class="three-level-dropdown-menu_panel" id="three-level-dropdown-menu-panel">

        <!-- 商品グループ -->
        <div class="three-level-dropdown-menu_group">

          <!-- 親項目 -->
          <button class="three-level-dropdown-menu_parent-button" type="button">
            商品
          </button>

          <!-- 子項目 -->
          <ul class="three-level-dropdown-menu_child-list">

            <li class="three-level-dropdown-menu_child-item">

              <!-- 子項目の開閉ボタン -->
              <button class="three-level-dropdown-menu_child-button" type="button">
                パソコン
              </button>

              <!-- 3階層目のリンク -->
              <ul class="three-level-dropdown-menu_grandchild-list">
                <li><a href="#">ノートPC</a></li>
                <li><a href="#">デスクトップPC</a></li>
                <li><a href="#">ゲーミングPC</a></li>
              </ul>

            </li>

            <li class="three-level-dropdown-menu_child-item">

              <!-- 子項目の開閉ボタン -->
              <button class="three-level-dropdown-menu_child-button" type="button">
                周辺機器
              </button>

              <!-- 3階層目のリンク -->
              <ul class="three-level-dropdown-menu_grandchild-list">
                <li><a href="#">マウス</a></li>
                <li><a href="#">キーボード</a></li>
                <li><a href="#">モニター</a></li>
              </ul>

            </li>

          </ul>

        </div>

        <!-- サービスグループ -->
        <div class="three-level-dropdown-menu_group">

          <!-- 親項目 -->
          <button class="three-level-dropdown-menu_parent-button" type="button">
            サービス
          </button>

          <!-- 子項目 -->
          <ul class="three-level-dropdown-menu_child-list">

            <li class="three-level-dropdown-menu_child-item">

              <!-- 子項目の開閉ボタン -->
              <button class="three-level-dropdown-menu_child-button" type="button">
                制作
              </button>

              <!-- 3階層目のリンク -->
              <ul class="three-level-dropdown-menu_grandchild-list">
                <li><a href="#">Webサイト制作</a></li>
                <li><a href="#">LP制作</a></li>
                <li><a href="#">保守管理</a></li>
              </ul>

            </li>

          </ul>

        </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; /* ページ全体で使用するフォント */
}

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

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

/* 説明文 */
.three-level-dropdown-menu_text{
  margin-bottom:24px; /* メニューとの間隔。値を大きくすると間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ドロップダウンメニュー */
.three-level-dropdown-menu_box{
  width:300px; /* メニューの横幅。値を大きくすると横に広がる */
  max-width:100%; /* 画面幅が狭い場合は親要素の横幅を超えないようにする */
  margin:0 auto; /* 左右中央へ配置 */
}

/* 各階層のボタン */
.three-level-dropdown-menu_button,
.three-level-dropdown-menu_parent-button,
.three-level-dropdown-menu_child-button{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を非表示 */
  font-weight:700; /* ボタンの文字を太字にする */
  text-align:left; /* ボタンの文字を左揃えにする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* 最初のメニューボタン */
.three-level-dropdown-menu_button{
  border-radius:12px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  text-align:center; /* ボタンの文字を中央揃えにする */
}

/* メニューパネル */
.three-level-dropdown-menu_panel{
  display:none; /* 初期状態では非表示 */
  margin-top:10px; /* 最初のボタンとの間隔。値を大きくすると間隔が広がる */
  border:1px solid #d1d5db; /* パネルを囲む枠線 */
  border-radius:12px; /* パネルの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* パネルの背景色 */
  overflow:hidden; /* 角丸から内容がはみ出さないようにする */
}

/* メニューパネルを開いた状態 */
.three-level-dropdown-menu_panel.is-active{
  display:block; /* is-activeが付いた場合に表示 */
}

/* 親項目のグループ */
.three-level-dropdown-menu_group{
  border-top:1px solid #e5e7eb; /* グループ同士の区切り線 */
}

/* 最初の親項目 */
.three-level-dropdown-menu_group:first-child{
  border-top:none; /* 最初のグループでは上側の区切り線を非表示 */
}

/* 親項目のボタン */
.three-level-dropdown-menu_parent-button{
  background:#eff6ff; /* 親項目の背景色 */
  color:#1f2937; /* 親項目の文字色 */
}

/* 子項目のリスト */
.three-level-dropdown-menu_child-list{
  display:none; /* 初期状態では非表示 */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  list-style:none; /* リスト先頭の記号を非表示 */
}

/* 子項目を開いた状態 */
.three-level-dropdown-menu_child-list.is-active{
  display:block; /* is-activeが付いた場合に表示 */
}

/* 子項目 */
.three-level-dropdown-menu_child-item{
  border-top:1px solid #f1f5f9; /* 子項目同士の区切り線 */
}

/* 子項目のボタン */
.three-level-dropdown-menu_child-button{
  padding-left:28px; /* 親項目より文字を右へずらして階層を表現 */
  background:#ffffff; /* 子項目の背景色 */
  color:#374151; /* 子項目の文字色 */
}

/* 3階層目のリスト */
.three-level-dropdown-menu_grandchild-list{
  display:none; /* 初期状態では非表示 */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  background:#f8fafc; /* 3階層目の背景色 */
  list-style:none; /* リスト先頭の記号を非表示 */
}

/* 3階層目を開いた状態 */
.three-level-dropdown-menu_grandchild-list.is-active{
  display:block; /* is-activeが付いた場合に表示 */
}

/* 3階層目の項目 */
.three-level-dropdown-menu_grandchild-list li{
  border-top:1px solid #e5e7eb; /* 項目同士の区切り線 */
}

/* 3階層目のリンク */
.three-level-dropdown-menu_grandchild-list a{
  display:block; /* リンク全体をクリック可能にする */
  padding:11px 42px; /* 上下11px・左右42px。左余白によって階層を表現 */
  color:#374151; /* リンクの文字色 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* 3階層目のリンクへマウスを重ねた状態 */
.three-level-dropdown-menu_grandchild-list a:hover{
  background:#eef2ff; /* マウスを重ねた項目の背景色 */
}

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

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

}

/* 最初のメニューボタンを取得 */
const threeLevelDropdownButton=
  document.getElementById(
    "three-level-dropdown-menu-button"
  );

/* メニューパネルを取得 */
const threeLevelDropdownPanel=
  document.getElementById(
    "three-level-dropdown-menu-panel"
  );

/* すべての親項目ボタンを取得 */
const threeLevelParentButtons=
  document.querySelectorAll(
    ".three-level-dropdown-menu_parent-button"
  );

/* すべての子項目ボタンを取得 */
const threeLevelChildButtons=
  document.querySelectorAll(
    ".three-level-dropdown-menu_child-button"
  );

/* 最初のメニューボタンをクリックしたとき */
threeLevelDropdownButton.addEventListener("click",function(){

  /* メニューパネルを開閉 */
  threeLevelDropdownPanel.classList.toggle(
    "is-active"
  );

});

/* 各親項目へクリック処理を設定 */
threeLevelParentButtons.forEach(function(button){

  /* 親項目をクリックしたとき */
  button.addEventListener("click",function(){

    /* 対応する子項目を開閉 */
    button.nextElementSibling.classList.toggle(
      "is-active"
    );

  });

});

/* 各子項目へクリック処理を設定 */
threeLevelChildButtons.forEach(function(button){

  /* 子項目をクリックしたとき */
  button.addEventListener("click",function(){

    /* 対応する3階層目を開閉 */
    button.nextElementSibling.classList.toggle(
      "is-active"
    );

  });

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「メニュー」から親項目、子項目、3階層目のリンクまでを階層構造で配置します。CSSでは階層ごとに背景色や左側の余白を変え、JavaScriptではクリックされた項目に対応するリストへis-activeクラスを付け外しして開閉します。

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

各ファイルの役割
index.htmlはドロップダウンメニューの階層構造を作るファイルです。「商品」「サービス」などの親項目、「パソコン」「周辺機器」「制作」などの子項目、その下に表示するリンクを設定できます。

style.cssはドロップダウンメニューのデザインを設定するファイルです。メニュー全体の横幅、ボタン、背景色、枠線、角丸、各階層の左余白などを設定しています。

script.jsは各階層を開閉する処理を記述したファイルです。最初の「メニュー」ボタンではメニューパネルを開閉し、親項目では子項目、子項目では3階層目のリンクを開閉します。

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

最初に「メニュー」をクリックすると「商品」と「サービス」が表示されます。「商品」をクリックすると「パソコン」と「周辺機器」が表示され、さらに「パソコン」をクリックすると「ノートPC」「デスクトップPC」「ゲーミングPC」が表示されます。それぞれのボタンをもう一度クリックすると、対応する階層を閉じることができます。

カスタマイズできる内容
index.htmlでは親項目、子項目、3階層目のリンク名やリンク先を変更できます。親項目を追加する場合はthree-level-dropdown-menu_group、子項目を追加する場合はthree-level-dropdown-menu_child-itemと同じ構造を追加してください。実際に使用する場合は、各href="#"を移動先のURLへ変更します。

style.cssではメニュー全体の横幅、内側余白、角丸、ボタンの背景色、各階層の背景色、文字の位置、区切り線などを変更できます。

数値調整
style.css
max-width:720px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がります。

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

border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなります。

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

margin-bottom:24px;
説明文とドロップダウンメニューの間隔です。値を大きくすると間隔が広がります。

width:300px;
ドロップダウンメニューの横幅です。値を大きくするとメニュー全体が横に広がります。

padding:14px 16px;
各階層のボタンの内側余白です。14pxが上下、16pxが左右の余白です。

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

margin-top:10px;
最初のメニューボタンとメニューパネルの間隔です。値を大きくすると間隔が広がります。

padding-left:28px;
子項目の左側余白です。値を大きくすると親項目より文字が右側へ移動し、階層の違いが強調されます。

padding:11px 42px;
3階層目のリンクの内側余白です。11pxが上下、42pxが左右の余白です。左右の値を大きくすると、3階層目の文字がさらに内側へ配置されます。

レスポンシブ対応
このサンプルではドロップダウンメニューにwidth:300pxとmax-width:100%を設定しているため、画面幅が狭くなった場合は利用できる横幅に合わせて縮小します。

画面幅480px以下では全体の内側余白をpadding:24px 18px;へ変更します。これにより、スマートフォンでもメニューが画面からはみ出しにくい構成になっています。