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

ドロップダウンメニュー

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

大きなドロップダウンメニューを作る方法を紹介します。このサンプルでは、HTML、CSS、JavaScriptを使い、ボタンをクリックすると複数のカテゴリーを一覧表示できる大きなドロップダウンメニューを実装します。サービス紹介や商品一覧、管理画面など、多くの項目を整理して表示したい場面で利用できます。

通常のドロップダウンメニューよりも広い表示領域を利用できるため、カテゴリーごとに項目をまとめたり、多くのリンクを見やすく配置できます。情報量が多いWebサイトでも、利用者が目的のページを探しやすくなるのが特徴です。

このサンプルでは、メニューをクリックすると横幅いっぱいに近い大型メニューが表示されます。複数のカテゴリーを横並びで配置できるため、ナビゲーションメニューや企業サイト、ECサイトなど幅広い用途で利用できます。カテゴリー名やリンク、配色なども自由に変更できます。

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

デモ

大きなドロップダウンメニュー

ボタンをクリックすると、多数のカテゴリーを一覧表示できます。

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

<!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">

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

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

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

          <!-- カテゴリー -->
          <div class="large-dropdown-menu_column">
            <div class="large-dropdown-menu_column-title">サポート</div>
            <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>

ファイル構成と設置方法

このサンプルは、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 で変更できます。また、style.css の grid-template-columns: repeat(4, 1fr); を変更すると表示する列数を調整できます。例えば repeat(3, 1fr) に変更すると3列表示、repeat(5, 1fr) に変更すると5列表示になります。

コメント