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

ドロップダウンメニュー

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

2階層付きドロップダウンメニューを作る方法を紹介します。このサンプルでは、HTML、CSS、JavaScriptを使い、親メニューをクリックすると子メニューが展開される階層型のドロップダウンメニューを実装します。カテゴリーが多いサイトや管理画面、ナビゲーションメニューなどで利用しやすいサンプルです。

階層付きドロップダウンメニューを利用すると、関連する項目をまとめて表示できるため、メニューを整理しやすくなります。親メニューだけを表示して必要な時だけ子メニューを展開するため、画面をすっきり保ちながら多くのメニューを配置できます。

このサンプルは、ドロップダウンメニューの中に階層構造を持たせ、親メニューごとに子メニューを開閉できるシンプルな構成です。メニュー項目や色、余白などは自由に変更できるため、さまざまなWebサイトへそのまま導入しやすくなっています。

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

デモ

2階層付きドロップダウンメニュー

メニューを開き、親項目をクリックすると子メニューが表示されます。

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

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

    <!-- 見出し -->
    <div class="hierarchical-dropdown-menu_title">
      階層付きドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="hierarchical-dropdown-menu_text">
      メニューを開き、親項目をクリックすると子メニューが表示されます。
    </p>

    <!-- メニュー全体 -->
    <div class="hierarchical-dropdown-menu_box">

      <!-- メインボタン -->
      <button class="hierarchical-dropdown-menu_button" id="hierarchical-dropdown-menu-button" type="button">
        メニュー
      </button>

      <!-- ドロップダウン本体 -->
      <div class="hierarchical-dropdown-menu_panel" id="hierarchical-dropdown-menu-panel">

        <!-- 親メニュー -->
        <div class="hierarchical-dropdown-menu_parent">

          <button class="hierarchical-dropdown-menu_parent-button" type="button">
            商品
          </button>

          <ul class="hierarchical-dropdown-menu_child">
            <li><a href="#">商品一覧</a></li>
            <li><a href="#">新商品</a></li>
            <li><a href="#">セール商品</a></li>
          </ul>

        </div>

        <!-- 親メニュー -->
        <div class="hierarchical-dropdown-menu_parent">

          <button class="hierarchical-dropdown-menu_parent-button" type="button">
            サービス
          </button>

          <ul class="hierarchical-dropdown-menu_child">
            <li><a href="#">Web制作</a></li>
            <li><a href="#">保守サポート</a></li>
            <li><a href="#">お問い合わせ</a></li>
          </ul>

        </div>

      </div>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。index.html に階層付きドロップダウンメニューの構造を記述し、style.css でデザインを設定し、script.js でドロップダウンメニューと各階層メニューの開閉処理を実装しています。 

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

sample フォルダ内へ各ファイルを配置し、sample/index.html をブラウザで開くと動作を確認できます。親メニューや子メニューの項目は index.html、色や余白、角丸などのデザインは style.css、ドロップダウンメニューや階層メニューの開閉処理は script.js で変更できます。階層を追加したい場合は、HTMLへ親メニューと子メニューの構造を追加するだけで利用できます。

コメント