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

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

立体的なドロップダウンメニューを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ボタンをクリックするとメニューが開閉するドロップダウンメニューを作成します。ボタンとメニューにグラデーションや厚み、影を加えることで、平面的なデザインではなく手前へ浮き上がって見える立体的なUIに仕上げています。

メニューボタンをクリックすると、その下へ「ホーム」「サービス」「お問い合わせ」の3項目を表示します。メニュー本体には下側の厚みと外側へ落ちる影を付け、各メニュー項目にも明暗差を加えています。メニュー項目へマウスカーソルを合わせると少し手前へ浮き上がるため、立体感を保ちながら現在選択している項目も分かりやすく確認できます。

メニュー名や各リンクの文章はHTMLから変更でき、CSSではボタンやメニューの横幅、色、余白、角丸、厚み、影、ホバー時の浮き上がり量などを調整できます。JavaScriptではボタンをクリックしたときにクラスを付け外ししてメニューの表示状態を切り替えます。スマートフォンにも対応しているため、さまざまなWebページで利用できる立体的なドロップダウンメニューのサンプルとして活用できます。

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

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

デモ

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

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

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

    <!-- 説明文 -->
    <p class="three-dimensional-dropdown-menu_text">
      ボタンをクリックすると、厚みと影を付けた立体的なメニューが表示されます。
    </p>

    <!-- メニュー配置エリア -->
    <div class="three-dimensional-dropdown-menu_group">

      <div class="three-dimensional-dropdown-menu_area">

        <!-- メニューボタン -->
        <button
          class="three-dimensional-dropdown-menu_button"
          type="button"
          data-three-dimensional-dropdown-menu-button="">
          メニュー
          <span class="three-dimensional-dropdown-menu_arrow">
            ▼
          </span>
        </button>

        <!-- ドロップダウンメニュー -->
        <ul
          class="three-dimensional-dropdown-menu_list"
          data-three-dimensional-dropdown-menu-list="">

          <li>
            <a class="three-dimensional-dropdown-menu_link" href="#">
              ホーム
            </a>
          </li>

          <li>
            <a class="three-dimensional-dropdown-menu_link" href="#">
              サービス
            </a>
          </li>

          <li>
            <a class="three-dimensional-dropdown-menu_link" 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; /* 使用するフォント */
}

/* ドロップダウンメニュー全体と内部要素 */
.three-dimensional-dropdown-menu_wrap,
.three-dimensional-dropdown-menu_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* ドロップダウンメニュー全体 */
.three-dimensional-dropdown-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅 */
  margin:40px auto; /* 上下40px・左右中央配置 */
  padding:36px 32px 48px; /* 上36px・左右32px・下48pxの内側余白 */
  border:1px solid #e5e7eb; /* 外枠 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 全体の背景色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* タイトル */
.three-dimensional-dropdown-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* 太字 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.three-dimensional-dropdown-menu_text{
  margin:0 0 30px; /* 下側30pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* メニュー配置エリア */
.three-dimensional-dropdown-menu_group{
  display:flex; /* メニューをflexで配置 */
  justify-content:center; /* 横方向中央へ配置 */
  padding-bottom:12px; /* 下側12pxの余白 */
}

/* ボタンとメニューをまとめる領域 */
.three-dimensional-dropdown-menu_area{
  position:relative; /* メニューの配置基準 */
  width:100%; /* 横幅いっぱいまで広げる */
  max-width:280px; /* 最大横幅を280pxにする */
}

/* メニューボタン */
.three-dimensional-dropdown-menu_button{
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 縦方向を中央揃え */
  justify-content:space-between; /* 文字と矢印を左右へ配置 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:52px; /* 最小高さ52px */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:1px solid #3b82f6; /* ボタンの枠線 */
  border-radius:10px; /* ボタンの角丸 */
  background:
    linear-gradient(
      to bottom,
      #3b82f6 0%,
      #2563eb 100%
    ); /* 上を明るく、下を濃くして立体感を付ける */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* 親要素と同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソルを指マークにする */
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.25),
    0 6px 0 #1e40af,
    0 11px 15px rgba(30,64,175,.22); /* ハイライト・厚み・外側の影 */
  transition:
    transform .2s ease,
    box-shadow .2s ease; /* 押下時の動きを滑らかにする */
}

/* ボタンを押したとき */
.three-dimensional-dropdown-menu_button:active{
  transform:translateY(3px); /* ボタンを下へ3px押し込む */
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.2),
    0 3px 0 #1e40af,
    0 6px 10px rgba(30,64,175,.18); /* 厚みと影を小さくして押し込みを表現 */
}

/* 矢印 */
.three-dimensional-dropdown-menu_arrow{
  flex-shrink:0; /* 矢印を縮ませない */
  margin-left:12px; /* 左側12pxの余白 */
  font-size:12px; /* 矢印の文字サイズ */
  transition:transform .3s ease; /* 回転を0.3秒で切り替える */
}

/* メニューが開いているときの矢印 */
.three-dimensional-dropdown-menu_button.is-open
.three-dimensional-dropdown-menu_arrow{
  transform:rotate(180deg); /* 矢印を180度回転 */
}

/* ドロップダウンメニュー */
.three-dimensional-dropdown-menu_list{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* ボタンを基準に配置 */
  top:calc(100% + 16px); /* ボタン下から16px離して配置 */
  left:0; /* 左端を揃える */
  z-index:10; /* 他の要素より手前へ表示 */
  width:100%; /* ボタンと同じ横幅 */
  margin:0; /* 標準の外側余白を削除 */
  padding:9px; /* 内側9pxの余白 */
  border:1px solid #cbd5e1; /* メニューの枠線 */
  border-radius:12px; /* メニュー全体の角丸 */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f1f5f9 100%
    ); /* 上を明るく、下を濃くして立体感を付ける */
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 0 #94a3b8,
    0 16px 22px rgba(15,23,42,.2); /* 上面のハイライト・下側の厚み・外側の影 */
  list-style:none; /* リストマーカーを非表示 */
}

/* メニュー表示状態 */
.three-dimensional-dropdown-menu_list.is-open{
  display:block; /* メニューを表示 */
}

/* 2つ目以降のメニュー項目 */
.three-dimensional-dropdown-menu_list li + li{
  margin-top:7px; /* メニュー項目同士を7px離す */
}

/* メニューリンク */
.three-dimensional-dropdown-menu_link{
  display:block; /* 横幅いっぱいをクリック可能にする */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:1px solid #e2e8f0; /* 項目の枠線 */
  border-radius:8px; /* 項目の角丸 */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f8fafc 100%
    ); /* 項目にも明暗差を付ける */
  color:#111827 !important; /* 文字色 */
  line-height:1.5; /* 行間 */
  text-align:left; /* 左揃え */
  text-decoration:none !important; /* 下線を削除 */
  box-shadow:
    0 2px 0 #cbd5e1,
    0 4px 6px rgba(15,23,42,.08); /* 項目の厚みと影 */
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease; /* ホバー時の変化を滑らかにする */
}

/* メニューリンクへマウスカーソルを合わせたとき */
.three-dimensional-dropdown-menu_link:hover{
  position:relative; /* z-indexを有効にする */
  z-index:2; /* 周囲の項目より手前へ表示 */
  transform:translateY(-2px); /* 上へ2px浮き上がらせる */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #dbeafe 100%
    ); /* ホバー時の背景色 */
  border-color:#bfdbfe; /* ホバー時の枠線色 */
  box-shadow:
    0 4px 0 #93c5fd,
    0 8px 10px rgba(37,99,235,.16); /* 厚みと影を強める */
}

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

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

}

/* メニューボタンを取得 */
const threeDimensionalDropdownMenuButton=document.querySelector(
  "[data-three-dimensional-dropdown-menu-button]"
);

/* ドロップダウンメニューを取得 */
const threeDimensionalDropdownMenuList=document.querySelector(
  "[data-three-dimensional-dropdown-menu-list]"
);

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

  /* ボタンのis-openクラスを切り替える */
  threeDimensionalDropdownMenuButton.classList.toggle("is-open");

  /* メニューのis-openクラスを切り替える */
  threeDimensionalDropdownMenuList.classList.toggle("is-open");

});

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