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

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

立体的なドロップダウンメニューを作る方法

立体的なドロップダウンメニューを作る方法を紹介します。このサンプルでは、開閉ボタンと選択肢の両方に影や押し込み表現を付け、通常のフラットなメニューよりも奥行きのあるデザインにしています。開閉ボタンをクリックすると下に選択肢が表示され、選択肢へマウスを重ねると少し浮き上がり、クリックすると押し込まれたように動きます。

選択肢は「商品について」「サービスについて」「料金について」「その他」の4項目を用意しています。初期状態では開閉ボタンに「選択してください」と表示し、選択肢をクリックすると選んだ内容へ文字が切り替わります。同時に選択した項目を青色で表示し、その後ドロップダウンメニューを閉じます。お問い合わせ画面、会員サイトの設定画面、ECサイトの商品分類など、複数の候補から1つを選択する場面で利用できます。

HTMLではタイトル、説明文、ラベル、選択肢の内容を変更でき、CSSでは横幅、余白、角丸、背景色、影、ボタンの高さ、選択肢同士の間隔、押し込み量やアニメーション時間などを調整できます。JavaScriptではメニューの開閉、選択状態の切り替え、選択した文字の反映を行います。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすい立体的なドロップダウンメニューとして活用できます。

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

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

デモ

立体的なドロップダウンメニュー

ボタンをクリックして、お問い合わせ内容を選択してください。

お問い合わせ内容

開閉ボタンと選択肢の両方に影と押し込み表現を付けた、立体的なドロップダウンメニューです。

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

<!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="three-dimensional-dropdown_wrap">

    <!-- タイトル -->
    <div class="three-dimensional-dropdown_title">
      立体的なドロップダウンメニュー
    </div>

    <!-- 説明文 -->
    <p class="three-dimensional-dropdown_text">
      ボタンをクリックして、お問い合わせ内容を選択してください。
    </p>

    <!-- ドロップダウンメニューの選択エリア -->
    <div class="three-dimensional-dropdown_field">

      <!-- 項目名 -->
      <div class="three-dimensional-dropdown_label">
        お問い合わせ内容
      </div>

      <!-- ドロップダウンメニューを開閉するボタン -->
      <button
        class="three-dimensional-dropdown_trigger"
        type="button"
        aria-expanded="false">

        <!-- 選択した内容を表示する部分 -->
        <span class="three-dimensional-dropdown_value">
          選択してください
        </span>

        <!-- 開閉状態を表す矢印 -->
        <span
          class="three-dimensional-dropdown_arrow"
          aria-hidden="true">
        </span>

      </button>

      <!-- ドロップダウンメニューの選択肢一覧 -->
      <ul class="three-dimensional-dropdown_options">

        <!-- 商品について -->
        <li class="three-dimensional-dropdown_option">

          <button
            class="three-dimensional-dropdown_option-button"
            type="button"
            data-value="商品について">
            商品について
          </button>

        </li>

        <!-- サービスについて -->
        <li class="three-dimensional-dropdown_option">

          <button
            class="three-dimensional-dropdown_option-button"
            type="button"
            data-value="サービスについて">
            サービスについて
          </button>

        </li>

        <!-- 料金について -->
        <li class="three-dimensional-dropdown_option">

          <button
            class="three-dimensional-dropdown_option-button"
            type="button"
            data-value="料金について">
            料金について
          </button>

        </li>

        <!-- その他 -->
        <li class="three-dimensional-dropdown_option">

          <button
            class="three-dimensional-dropdown_option-button"
            type="button"
            data-value="その他">
            その他
          </button>

        </li>

      </ul>

    </div>

    <!-- ドロップダウンメニューの補足説明 -->
    <p class="three-dimensional-dropdown_description">
      開閉ボタンと選択肢の両方に影と押し込み表現を付けた、立体的なドロップダウンメニューです。
    </p>

  </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-dimensional-dropdown_wrap,
.three-dimensional-dropdown_wrap *{
  box-sizing:border-box; /* paddingとborderを要素の横幅へ含める */
}

/* ドロップダウンメニュー全体 */
.three-dimensional-dropdown_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白。値を大きくすると上下の間隔が広がる */
  padding:36px 32px 42px; /* 上36px・左右32px・下42px。値を大きくすると内側の余白が広がる */
  border:1px solid #dbe3ef; /* 全体を囲む枠線 */
  border-radius:20px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* ドロップダウンメニュー全体の背景色 */
  color:#111827; /* ドロップダウンメニュー内の基本文字色 */
}

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

/* タイトル下の説明文 */
.three-dimensional-dropdown_text{
  margin:0 0 30px; /* 下側30pxの余白。値を大きくすると選択エリアとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ドロップダウンメニューの選択エリア */
.three-dimensional-dropdown_field{
  position:relative; /* 選択肢一覧を配置する基準にする */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  max-width:460px; /* 選択エリアの最大横幅。値を大きくすると横に広がる */
  margin:0 auto; /* 選択エリアを左右中央へ配置 */
  transition:margin-bottom .3s ease;
  /*
    0.3秒で下側余白を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* ドロップダウンメニューを開いた状態 */
.three-dimensional-dropdown_field.is-open{
  margin-bottom:290px; /* 選択肢用の下側スペース。値を大きくすると開いたときの空間が広がる */
}

/* 項目名 */
.three-dimensional-dropdown_label{
  display:block; /* 項目名をブロック要素として表示 */
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると開閉ボタンとの間隔が広がる */
  color:#374151; /* 項目名の文字色 */
  font-size:15px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
}

/* 開閉ボタン */
.three-dimensional-dropdown_trigger{
  position:relative; /* z-indexを有効にする */
  z-index:5; /* 選択肢より手前へ表示。値を大きくすると重なり順が前になる */
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 文字と矢印を上下中央へ配置 */
  justify-content:space-between; /* 文字と矢印を左右へ分ける */
  width:100%; /* 選択エリアの横幅いっぱいに表示 */
  min-height:58px; /* 最小高さ。値を大きくすると開閉ボタンが高くなる */
  padding:0 20px; /* 左右20pxの内側余白。値を大きくすると文字と端の間隔が広がる */
  border:1px solid #93c5fd; /* 開閉ボタンの枠線 */
  border-radius:12px; /* 開閉ボタンの角丸。値を大きくすると丸みが強くなる */
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #eff6ff 100%
  ); /* 上から下へ変化する背景色 */
  box-shadow:
    0 5px 0 #60a5fa,
    0 10px 18px rgba(37,99,235,.16);
  /*
    5pxの下向き影で厚みを作り、10px・18pxの影で浮いた立体感を付ける。
    数値を大きくすると影が下方向へ広がり、立体感が強くなる。
  */
  color:#1f2937; /* 開閉ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* 開閉ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 開閉ボタンの文字を太字にする */
  text-align:left; /* 開閉ボタンの文字を左揃えにする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  transform:translateY(0); /* 通常時は上下へ移動させない */
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
  /*
    0.18秒で位置・影・枠線・背景色・文字色を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* 開閉ボタンへマウスを重ねた状態 */
.three-dimensional-dropdown_trigger:hover{
  border-color:#60a5fa; /* マウスオーバー時の枠線色 */
  box-shadow:
    0 6px 0 #3b82f6,
    0 12px 20px rgba(37,99,235,.2);
  /*
    通常時より影を大きくして浮き上がったように見せる。
    数値を大きくすると影の広がりが強くなる。
  */
  transform:translateY(-2px); /* 2px上へ移動。値を大きくすると浮き上がる距離が増える */
}

/* 開閉ボタンを押している状態 */
.three-dimensional-dropdown_trigger:active{
  box-shadow:
    0 2px 0 #2563eb,
    0 5px 9px rgba(37,99,235,.14);
  /*
    影を小さくして押し込まれたように見せる。
    数値を大きくすると影の広がりが強くなる。
  */
  transform:translateY(3px); /* 3px下へ移動。値を大きくすると押し込む距離が増える */
}

/* メニューを開いたときの開閉ボタン */
.three-dimensional-dropdown_field.is-open
.three-dimensional-dropdown_trigger{
  border-color:#2563eb; /* 開いているときの枠線色 */
  background:linear-gradient(
    to bottom,
    #3b82f6 0%,
    #2563eb 100%
  ); /* 開いているときの青色グラデーション */
  box-shadow:
    0 5px 0 #1e40af,
    0 10px 18px rgba(37,99,235,.24);
  /*
    開いているボタンへ青色の立体的な影を付ける。
    数値を大きくすると影が広がり、立体感が強くなる。
  */
  color:#ffffff; /* 開いているときの文字色 */
}

/* 開閉ボタン右側の矢印 */
.three-dimensional-dropdown_arrow{
  flex:0 0 auto; /* 矢印の大きさを固定 */
  width:11px; /* 矢印の横幅。値を大きくすると矢印が大きくなる */
  height:11px; /* 矢印の高さ。値を大きくすると矢印が大きくなる */
  margin-left:16px; /* 文字との間隔。値を大きくすると間隔が広がる */
  border-right:3px solid #2563eb; /* 矢印の線。3pxを大きくすると太くなる */
  border-bottom:3px solid #2563eb; /* 矢印の線。3pxを大きくすると太くなる */
  transform:translateY(-3px) rotate(45deg); /* 3px上へ移動して45度回転し、下向き矢印にする */
  transition:
    border-color .18s ease,
    transform .3s ease;
  /*
    色は0.18秒、回転は0.3秒で切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* メニューを開いたときの矢印 */
.three-dimensional-dropdown_field.is-open
.three-dimensional-dropdown_arrow{
  border-color:#ffffff; /* 開いているときの矢印色 */
  transform:translateY(3px) rotate(225deg); /* 3px下へ移動して225度回転し、上向きにする */
}

/* 選択肢一覧 */
.three-dimensional-dropdown_options{
  position:absolute; /* 開閉ボタンの下へ重ねて配置 */
  z-index:4; /* 開閉ボタンより1段後ろへ表示。値を大きくすると重なり順が前になる */
  top:calc(100% + 14px); /* 開閉ボタンの下から14px空ける。値を大きくすると間隔が広がる */
  right:0; /* 右端を選択エリアへ合わせる */
  left:0; /* 左端を選択エリアへ合わせる */
  display:flex; /* 選択肢をFlexboxで配置 */
  flex-direction:column; /* 選択肢を縦方向へ並べる */
  gap:12px; /* 選択肢同士の間隔。値を大きくすると間隔が広がる */
  margin:0; /* ul要素の標準外側余白を削除 */
  padding:0; /* ul要素の標準内側余白を削除 */
  list-style:none; /* リストマーカーを非表示 */
  opacity:0; /* 閉じているときは透明にする */
  visibility:hidden; /* 閉じているときは操作できない状態にする */
  transform:translateY(-12px); /* 閉じた状態では12px上へ配置。値を大きくすると移動距離が増える */
  transform-origin:top center; /* 上中央を変形の基準位置にする */
  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;
  /*
    0.3秒で透明度・表示状態・位置を切り替える。
    値を大きくするとゆっくり、小さくすると速く開閉する。
  */
}

/* メニューを開いたときの選択肢一覧 */
.three-dimensional-dropdown_field.is-open
.three-dimensional-dropdown_options{
  opacity:1; /* 選択肢を完全に表示 */
  visibility:visible; /* 選択肢を操作できる状態にする */
  transform:translateY(0); /* 本来の位置へ移動して表示 */
}

/* 選択肢 */
.three-dimensional-dropdown_option{
  margin:0; /* li要素の外側余白を削除 */
}

/* 選択肢ボタン */
.three-dimensional-dropdown_option-button{
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 文字と矢印を上下中央へ配置 */
  justify-content:space-between; /* 文字と矢印を左右へ分ける */
  width:100%; /* 選択肢の横幅いっぱいに表示 */
  min-height:54px; /* 最小高さ。値を大きくすると選択肢が高くなる */
  padding:0 18px; /* 左右18pxの内側余白。値を大きくすると文字と端の間隔が広がる */
  border:1px solid #bfdbfe; /* 選択肢の枠線 */
  border-radius:11px; /* 選択肢の角丸。値を大きくすると丸みが強くなる */
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #eff6ff 100%
  ); /* 選択肢の背景グラデーション */
  box-shadow:
    0 4px 0 #60a5fa,
    0 8px 14px rgba(37,99,235,.14);
  /*
    4pxの下向き影で厚みを作り、8px・14pxの影で浮いた立体感を付ける。
    数値を大きくすると影が広がり、立体感が強くなる。
  */
  color:#1f2937; /* 選択肢の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:15px; /* 選択肢の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 選択肢の文字を太字にする */
  text-align:left; /* 選択肢の文字を左揃えにする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  transform:translateY(0); /* 通常時は上下へ移動させない */
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
  /*
    0.18秒で位置・影・枠線・背景色・文字色を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* 選択肢右側の矢印 */
.three-dimensional-dropdown_option-button::after{
  content:""; /* 疑似要素で矢印を作成 */
  width:8px; /* 矢印の横幅。値を大きくすると矢印が大きくなる */
  height:8px; /* 矢印の高さ。値を大きくすると矢印が大きくなる */
  margin-left:16px; /* 文字との間隔。値を大きくすると間隔が広がる */
  border-right:2px solid #93c5fd; /* 矢印の線。2pxを大きくすると太くなる */
  border-bottom:2px solid #93c5fd; /* 矢印の線。2pxを大きくすると太くなる */
  transform:rotate(-45deg); /* -45度回転して右向き矢印にする */
  transition:border-color .18s ease; /* 0.18秒で色を変更。値を大きくするとゆっくり変化する */
}

/* 選択肢へマウスを重ねた状態 */
.three-dimensional-dropdown_option-button:hover{
  border-color:#60a5fa; /* マウスオーバー時の枠線色 */
  background:#ffffff; /* マウスオーバー時の背景色 */
  box-shadow:
    0 6px 0 #3b82f6,
    0 12px 18px rgba(37,99,235,.18);
  /*
    通常時より影を大きくして浮き上がったように見せる。
    数値を大きくすると影の広がりが強くなる。
  */
  transform:translateY(-2px); /* 2px上へ移動。値を大きくすると浮き上がる距離が増える */
}

/* 選択肢へマウスを重ねたときの矢印 */
.three-dimensional-dropdown_option-button:hover::after{
  border-color:#2563eb; /* マウスオーバー時の矢印色 */
}

/* 選択肢を押している状態 */
.three-dimensional-dropdown_option-button:active{
  box-shadow:
    0 1px 0 #2563eb,
    0 4px 7px rgba(37,99,235,.12);
  /*
    影を小さくして押し込まれたように見せる。
    数値を大きくすると影の広がりが強くなる。
  */
  transform:translateY(3px); /* 3px下へ移動。値を大きくすると押し込む距離が増える */
}

/* 選択された選択肢 */
.three-dimensional-dropdown_option-button.is-selected{
  border-color:#2563eb; /* 選択された項目の枠線色 */
  background:linear-gradient(
    to bottom,
    #3b82f6 0%,
    #2563eb 100%
  ); /* 選択された項目の青色グラデーション */
  box-shadow:
    0 4px 0 #1e40af,
    0 8px 14px rgba(37,99,235,.22);
  /*
    選択された項目へ青色の立体的な影を付ける。
    数値を大きくすると影が広がり、立体感が強くなる。
  */
  color:#ffffff; /* 選択された項目の文字色 */
}

/* 選択された選択肢の矢印 */
.three-dimensional-dropdown_option-button.is-selected::after{
  border-color:#ffffff; /* 選択された項目の矢印色 */
}

/* 下部の補足説明 */
.three-dimensional-dropdown_description{
  margin:28px 0 0; /* 上側28pxの余白。値を大きくすると選択エリアとの間隔が広がる */
  color:#4b5563; /* 補足説明の文字色 */
  font-size:16px; /* 補足説明の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 補足説明の行間。値を大きくすると行間が広がる */
  text-align:center; /* 補足説明を中央揃えにする */
}

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

  /* ドロップダウンメニュー全体 */
  .three-dimensional-dropdown_wrap{
    padding:28px 18px 34px; /* 上28px・左右18px・下34px。値を大きくすると内側の余白が広がる */
  }

  /* 開閉ボタン */
  .three-dimensional-dropdown_trigger{
    min-height:56px; /* スマートフォン時の最小高さ。値を大きくするとボタンが高くなる */
    padding:0 16px; /* 左右16pxの内側余白。値を大きくすると文字と端の間隔が広がる */
    font-size:15px; /* スマートフォン時の文字サイズ。値を大きくすると文字が大きくなる */
  }

  /* 選択肢一覧 */
  .three-dimensional-dropdown_options{
    gap:10px; /* スマートフォン時の選択肢間隔。値を大きくすると間隔が広がる */
  }

  /* 選択肢ボタン */
  .three-dimensional-dropdown_option-button{
    min-height:52px; /* スマートフォン時の最小高さ。値を大きくすると選択肢が高くなる */
    padding:0 16px; /* 左右16pxの内側余白。値を大きくすると文字と端の間隔が広がる */
  }

}

/* ドロップダウンメニューの選択エリアを取得 */
const threeDimensionalDropdownField=
  document.querySelector(
    ".three-dimensional-dropdown_field"
  );

/* ドロップダウンメニューの開閉ボタンを取得 */
const threeDimensionalDropdownTrigger=
  document.querySelector(
    ".three-dimensional-dropdown_trigger"
  );

/* 選択した内容を表示する要素を取得 */
const threeDimensionalDropdownValue=
  document.querySelector(
    ".three-dimensional-dropdown_value"
  );

/* すべての選択肢ボタンを取得 */
const threeDimensionalDropdownButtons=
  document.querySelectorAll(
    ".three-dimensional-dropdown_option-button"
  );

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

    /* is-openクラスを切り替えてメニューを開閉 */
    const isOpen=
      threeDimensionalDropdownField.classList.toggle(
        "is-open"
      );

    /* 開閉状態をaria-expandedへ反映 */
    threeDimensionalDropdownTrigger.setAttribute(
      "aria-expanded",
      String(isOpen)
    );

  }
);

/* 各選択肢へクリック処理を設定 */
threeDimensionalDropdownButtons.forEach(
  function(button){

    /* 選択肢をクリックしたときの処理 */
    button.addEventListener(
      "click",
      function(){

        /* すべての選択肢から選択状態を解除 */
        threeDimensionalDropdownButtons.forEach(
          function(item){

            /* is-selectedクラスを削除 */
            item.classList.remove(
              "is-selected"
            );

          }
        );

        /* クリックした選択肢を選択状態にする */
        button.classList.add(
          "is-selected"
        );

        /* data-valueの内容を開閉ボタンへ表示 */
        threeDimensionalDropdownValue.textContent=
          button.dataset.value;

        /*
          選択状態を0.1秒表示してからメニューを閉じる。
          100は0.1秒を表し、値を大きくすると閉じるまでの時間が長くなる。
        */
        setTimeout(
          function(){

            /* メニューを閉じる */
            threeDimensionalDropdownField.classList.remove(
              "is-open"
            );

            /* aria-expandedを閉じた状態へ戻す */
            threeDimensionalDropdownTrigger.setAttribute(
              "aria-expanded",
              "false"
            );

          },
          100
        );

      }
    );

  }
);

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、開閉ボタン、4つの選択肢を作成し、CSSでは開閉ボタンと選択肢へ影や押し込み表現を付けて立体的なデザインにします。JavaScriptではドロップダウンメニューの開閉、選択状態の切り替え、選択した内容の表示を行います。

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

各ファイルの役割
index.htmlはドロップダウンメニュー全体を構成するファイルです。タイトル、説明文、「お問い合わせ内容」の項目名、「選択してください」の初期表示、「商品について」「サービスについて」「料金について」「その他」の4つの選択肢を変更できます。

style.cssはドロップダウンメニューのデザインを設定するファイルです。全体の横幅や余白、開閉ボタンと選択肢の高さ、背景色、枠線、角丸、影、マウスオーバー時の浮き上がり、クリック時の押し込み、開閉時のアニメーションなどを変更できます。

script.jsはドロップダウンメニューの動作を設定するファイルです。開閉ボタンをクリックしたときの表示切り替え、選択した項目へのis-selectedクラスの付与、data-valueの内容を開閉ボタンへ反映する処理、選択後にメニューを閉じる処理を行います。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、そのままドロップダウンメニューを動作確認できます。

初期状態では開閉ボタンに「選択してください」と表示されます。ボタンをクリックすると4つの選択肢が下方向へ表示されます。選択肢をクリックすると、その項目が選択状態になり、選択した内容が開閉ボタンへ表示されたあとメニューが閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、初期表示、選択肢の文字を変更できます。選択肢を変更する場合は、ボタン内に表示する文字とdata-valueの値を用途に合わせて変更してください。お問い合わせ内容だけでなく、商品カテゴリーや各種設定項目などの選択にも利用できます。

style.cssでは全体の横幅、余白、角丸、背景色、開閉ボタンと選択肢の高さ、文字サイズ、枠線、影、選択肢同士の間隔、マウスオーバー時とクリック時の移動量、開閉アニメーションの速度などを変更できます。

script.jsでは選択後にメニューを閉じるまでの待機時間を変更できます。開閉処理や選択状態の切り替え、選択内容の反映もこのファイルで行っています。

数値調整
style.css
max-width:700px;
ドロップダウンメニュー全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:36px 32px 42px;
全体の内側余白です。上36px・左右32px・下42pxをそれぞれ変更すると、内容と外枠の間隔を調整できます。

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

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

margin:0 0 30px;
タイトル下の説明文と選択エリアの間隔です。30pxを大きくすると間隔が広がり、小さくすると狭くなります。

max-width:460px;
開閉ボタンと選択肢を含む選択エリアの最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。

transition:margin-bottom .3s ease;
メニューを開閉するときに下側スペースが変化する時間です。0.3秒を大きくするとゆっくり、小さくすると速く変化します。

margin-bottom:290px;
メニューを開いたときに選択肢を表示するための下側スペースです。値を大きくすると空間が広がり、小さくすると狭くなります。

min-height:58px;
開閉ボタンの最小高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。

padding:0 20px;
開閉ボタンの左右の内側余白です。20pxを大きくすると文字とボタン端の間隔が広がります。

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

box-shadow:0 5px 0 ...
開閉ボタンの厚みを作る影です。5pxを大きくすると下方向の厚みが強くなります。

transform:translateY(-2px);
マウスを重ねたときに開閉ボタンを上へ移動する距離です。絶対値を大きくすると浮き上がる動きが強くなります。

transform:translateY(3px);
クリック中に開閉ボタンを下へ移動する距離です。値を大きくすると押し込み量が大きくなります。

width:11px;・height:11px;
開閉ボタン右側にある矢印の大きさです。値を大きくすると矢印が大きくなります。

top:calc(100% + 14px);
開閉ボタンと選択肢一覧の間隔です。14pxを大きくすると選択肢がさらに下へ移動します。

gap:12px;
選択肢同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

transform:translateY(-12px);
閉じた状態で選択肢一覧を上へ移動させる距離です。絶対値を大きくすると開閉時の移動量が大きくなります。

transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
選択肢一覧を開閉するアニメーション時間です。0.3秒を大きくするとゆっくり、小さくすると速く変化します。

min-height:54px;
各選択肢の最小高さです。値を大きくすると選択肢が高くなり、小さくすると低くなります。

padding:0 18px;
選択肢の左右の内側余白です。18pxを大きくすると文字と端の間隔が広がります。

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

box-shadow:0 4px 0 ...
選択肢の厚みを作る影です。4pxを大きくすると下方向の厚みが強くなります。

transition:.18s
開閉ボタンや選択肢を操作したときの位置・影・色などの切り替え時間です。0.18秒を大きくするとゆっくり、小さくすると速く変化します。

script.js
100
選択肢をクリックしてからメニューを閉じるまでの待機時間です。100は0.1秒を表します。値を大きくすると選択状態を長く表示してから閉じます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700px、選択エリアのwidth:100%とmax-width:460pxにより、画面幅に合わせて全体が縮小されます。

画面幅640px以下ではメディアクエリを使用し、全体の余白をpadding:28px 18px 34px;、開閉ボタンの高さをmin-height:56px;、選択肢の間隔をgap:10px;、選択肢の高さをmin-height:52px;へ変更しています。そのため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。