横並びのドロップダウンメニューを1つずつ開く方法【HTML/CSS/JavaScript・サンプルコード付き】

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

横並びのドロップダウンメニューを1つずつ開く方法

横並びに配置した複数のドロップダウンメニューを1つずつ開く方法を紹介します。このサンプルでは、「メニュー1」と「メニュー2」の2つのドロップダウンメニューを横並びに配置し、それぞれのボタンをクリックしてメニューを開閉できます。どちらか一方を開いた状態でもう一方のボタンをクリックすると、先に開いていたメニューが自動で閉じ、新しく選んだメニューだけが表示されます。

複数のドロップダウンメニューを同じ場所へ配置すると、複数のメニューが同時に開いて画面が見づらくなる場合があります。このサンプルでは、JavaScriptで現在開いているメニューを確認し、クリックされたメニュー以外からis-activeクラスを削除することで、常に1つだけ開くようにしています。ヘッダーのナビゲーション、管理画面の操作メニュー、会員サイトのメニューなど、複数の選択肢を横並びで整理したい場面に利用できます。

HTMLでは開閉ボタンの文字、メニュー項目、リンク先を変更でき、CSSではメニューの横幅、ボタンの色、余白、角丸、メニュー同士の間隔、ドロップダウンの表示位置などを調整できます。JavaScriptでは複数の開閉ボタンへ同じクリック処理を設定しているため、同じ構造のドロップダウンメニューを追加することもできます。画面幅が狭い場合は縦並びへ切り替わるため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

「メニュー1」または「メニュー2」をクリックしてください。別のメニューを開くと、先に開いていたメニューは自動で閉じます。

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

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

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

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

  <!-- ページタイトル -->
  <title>横並びのドロップダウンメニューを1つずつ開く</title>

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

</head>
<body>

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

    <!-- タイトル -->
    <div class="single-open-dropdown-menu_title">
      横並びのドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="single-open-dropdown-menu_text">
      別のメニューを開くと、先に開いていたメニューが自動で閉じます。
    </p>

    <!-- 複数のドロップダウンメニューを並べるエリア -->
    <div class="single-open-dropdown-menu_row">

      <!-- 1つ目のドロップダウンメニュー -->
      <div class="single-open-dropdown-menu_box">

        <!-- 1つ目の開閉ボタン -->
        <button class="single-open-dropdown-menu_button" type="button">
          メニュー1
        </button>

        <!-- 1つ目のメニュー項目 -->
        <ul class="single-open-dropdown-menu_list">

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

          <li>
            <a href="#">サービス</a>
          </li>

          <li>
            <a href="#">お問い合わせ</a>
          </li>

        </ul>

      </div>

      <!-- 2つ目のドロップダウンメニュー -->
      <div class="single-open-dropdown-menu_box">

        <!-- 2つ目の開閉ボタン -->
        <button class="single-open-dropdown-menu_button" type="button">
          メニュー2
        </button>

        <!-- 2つ目のメニュー項目 -->
        <ul class="single-open-dropdown-menu_list">

          <li>
            <a href="#">プロフィール</a>
          </li>

          <li>
            <a href="#">設定</a>
          </li>

          <li>
            <a href="#">ログアウト</a>
          </li>

        </ul>

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

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

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

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

/* 複数のドロップダウンメニューを並べるエリア */
.single-open-dropdown-menu_row{
  display:flex; /* ドロップダウンメニューを横並びにする */
  justify-content:center; /* 横方向の中央へ配置 */
  gap:24px; /* メニュー同士の間隔。値を大きくすると間隔が広がる */
}

/* 1つのドロップダウンメニュー */
.single-open-dropdown-menu_box{
  position:relative; /* メニューリストを配置する基準にする */
  width:220px; /* 1つのメニューの横幅。値を大きくすると横に広がる */
}

/* 開閉ボタン */
.single-open-dropdown-menu_button{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:14px; /* 内側余白。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を非表示 */
  border-radius:12px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:15px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* ドロップダウンメニューのリスト */
.single-open-dropdown-menu_list{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* 開閉ボタンの下へ配置 */
  top:calc(100% + 10px); /* ボタン下端から10px離して表示。値を大きくすると間隔が広がる */
  left:0; /* ボタンの左端に揃える */
  z-index:10; /* 周囲の要素より手前へ表示 */
  width:100%; /* ボタンと同じ横幅にする */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:8px 0; /* 上下8pxの内側余白。値を大きくするとリスト上下の余白が広がる */
  border:1px solid #d1d5db; /* リストを囲む枠線 */
  border-radius:12px; /* リストの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* リストの背景色 */
  box-shadow:0 10px 25px rgba(15,23,42,.08); /* 10pxは下方向の影、25pxはぼかしの大きさ */
  list-style:none; /* リスト先頭の記号を非表示 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* メニューを開いた状態 */
.single-open-dropdown-menu_list.is-active{
  display:block; /* 選択されたメニューだけ表示する */
}

/* 2項目目以降 */
.single-open-dropdown-menu_list li+li{
  border-top:1px solid #e5e7eb; /* メニュー項目同士の区切り線 */
}

/* メニュー内のリンク */
.single-open-dropdown-menu_list a{
  display:block; /* リンク全体をクリック可能にする */
  padding:12px 18px; /* 上下12px・左右18px。値を大きくすると項目が大きくなる */
  color:#374151; /* リンクの文字色 */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* リンクへマウスを重ねた状態 */
.single-open-dropdown-menu_list a:hover{
  background:#eff6ff; /* マウスを重ねた項目の背景色 */
}

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

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

  /* メニューを縦並びへ変更 */
  .single-open-dropdown-menu_row{
    flex-direction:column; /* 横並びから縦並びへ変更 */
    align-items:center; /* 横方向の中央へ配置 */
    gap:18px; /* メニュー同士の間隔。値を大きくすると間隔が広がる */
  }

  /* 1つのドロップダウンメニュー */
  .single-open-dropdown-menu_box{
    width:100%; /* 利用できる横幅いっぱいに広げる */
    max-width:280px; /* 最大横幅。値を大きくするとメニューが横に広がる */
  }

}

/* すべての開閉ボタンを取得 */
const singleOpenDropdownMenuButtons=
  document.querySelectorAll(
    ".single-open-dropdown-menu_button"
  );

/* すべてのメニューリストを取得 */
const singleOpenDropdownMenuLists=
  document.querySelectorAll(
    ".single-open-dropdown-menu_list"
  );

/* 各開閉ボタンへクリック処理を設定 */
singleOpenDropdownMenuButtons.forEach(function(button){

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

    /* クリックしたボタンに対応するメニューを取得 */
    const currentList=button.nextElementSibling;

    /* クリック前にメニューが開いていたか確認 */
    const isOpen=currentList.classList.contains(
      "is-active"
    );

    /* すべてのメニューを一度閉じる */
    singleOpenDropdownMenuLists.forEach(function(list){

      /* is-activeクラスを削除して非表示にする */
      list.classList.remove("is-active");

    });

    /* クリック前に閉じていた場合だけ開く */
    if(!isOpen){

      /* 対象メニューへis-activeクラスを追加 */
      currentList.classList.add("is-active");

    }

  });

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「メニュー1」と「メニュー2」の2つのドロップダウンメニューを作成し、CSSでは2つのメニューを横並びに配置します。JavaScriptではクリックされたメニュー以外を一度閉じてから対象のメニューを開くことで、複数のドロップダウンメニューが同時に開かないようにしています。

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

各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。開閉ボタンの文字、メニュー項目、各リンクの表示内容やリンク先を変更できます。サンプルでは「メニュー1」と「メニュー2」の2つを配置しています。

style.cssはドロップダウンメニューのデザインと配置を設定するファイルです。2つのメニューを横並びにし、ボタンの色、横幅、余白、角丸、リストの表示位置、枠線、影などを設定しています。画面幅640px以下では横並びから縦並びへ切り替えます。

script.jsは複数のドロップダウンメニューを1つずつ開く処理を記述したファイルです。クリックされたボタンに対応するリストを取得し、ほかのリストからis-activeクラスを削除してから対象のリストを表示します。同じボタンをもう一度クリックすると、そのメニューを閉じることもできます。

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

「メニュー1」をクリックすると1つ目のドロップダウンメニューが開きます。その状態で「メニュー2」をクリックするとメニュー1が自動で閉じ、メニュー2だけが開きます。開いているメニューと同じボタンをもう一度クリックすると閉じます。

カスタマイズできる内容
index.htmlでは開閉ボタンの文字、メニュー項目、リンク先を変更できます。同じsingle-open-dropdown-menu_boxの構造を追加すると、横並びに配置するドロップダウンメニューを増やせます。実際に使用する場合は、各href="#"を移動先のURLへ変更してください。

style.cssでは全体の最大横幅、メニュー同士の間隔、1つのメニューの横幅、ボタンの背景色、文字サイズ、角丸、リストの表示位置、余白、枠線、影などを変更できます。

数値調整
style.css
max-width:760px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

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

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

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

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

gap:24px;
横並びにしたドロップダウンメニュー同士の間隔です。値を大きくすると間隔が広がります。

width:220px;
1つのドロップダウンメニューの横幅です。値を大きくするとボタンとリストが横に広がります。

padding:14px;
開閉ボタンの内側余白です。値を大きくするとボタンが大きくなります。

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

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

top:calc(100% + 10px);
ボタンとメニューリストの間隔です。10pxを大きくするとリストがボタンから離れ、小さくすると近づきます。

padding:8px 0;
メニューリストの上下余白です。8pxを大きくするとリスト上下の余白が広がります。

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

padding:12px 18px;
メニュー項目の内側余白です。12pxが上下、18pxが左右の余白です。値を大きくすると項目が大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。通常はdisplay:flexによって2つのドロップダウンメニューを横並びに表示します。画面幅640px以下ではflex-direction:columnへ変更し、メニューを縦並びに切り替えます。

スマートフォン表示では全体の内側余白をpadding:24px 18px;へ縮小し、各メニューにはwidth:100%とmax-width:280pxを設定しています。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。