CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで作る分割ボタン（スプリットボタン）式ドロップダウンメニューの実装方法

Webサイトや管理画面などのUIでよく見かける「分割ボタン（スプリットボタン）」型のドロップダウンメニュー。これは、メインのボタンとその横に並ぶ矢印ボタンで構成され、矢印部分にカーソルを合わせると選択肢の一覧が展開されるUIパターンです。本記事では、JavaScriptに頼らずCSSだけでこの分割ボタンドロップダウンを実装する方法を、サンプルコードとともに解説します。

実装例：完全なサンプルコード

以下が、CSSで分割ボタンのドロップダウンを作成するための完全なコードです。そのままHTMLファイルとして保存すれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
button {
  background-color: rgb(18, 5, 95);
  color: white;
  padding: 16px;
  font-size: 20px;
  font-weight: bolder;
  font-family: monospace, sans-serif;
  border: none;
  outline: none;
}
.dropMenu {
  position: absolute;
  display: inline-block;
}
.dropMenu button {
  border-left: 1px solid #0d8bf2;
}
.dropContent {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}
.dropContent a {
  color: black;
  background-color: rgb(184, 253, 255);
  font-size: 18px;
  font-weight: bold;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropContent a:hover {
  background-color: rgb(48, 0, 110);
  color: white;
}
.dropMenu:hover .dropContent {
  display: block;
}
.btn:hover,
.dropMenu:hover .btn {
  background-color: #0b7dda;
}
</style>
</head>
<body>
<h1>Split Button dropMenu Example</h1>
<button>Button</button>
<div class="dropMenu">
  <button>>></button>
  <div class="dropContent">
    <a href="#">First Link</a>
    <a href="#">Second Link</a>
    <a href="#">Third Link</a>
  </div>
</div>
<h1>Hover over '>>' to open dropMenu menu</h1>
</body>
</html>

コードのポイント解説

  • .dropMenu（コンテナ）：ドロップダウン全体を包む要素です。display: inline-block; を指定することで、左側のメインボタンの横に矢印ボタンが並びます。
  • .dropContent（メニュー本体）：初期状態は display: none; で非表示にしておきます。position: absolute; と z-index: 1; の指定により、他の要素の上に重ねて表示されます。
  • .dropMenu:hover .dropContent：このセレクタが実装の要です。親要素にカーソルが乗った瞬間だけ display: block; に切り替わり、メニューが展開されます。
  • ホバー時の色変化：ボタンやリンクに :hover 時の背景色・文字色を設定することで、クリック可能な要素であることが直感的に伝わります。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

CSSで作る分割ボタン（スプリットボタン）式ドロップダウンメニューの実装方法

矢印ボタン（>> の部分）にカーソルを合わせると、以下のようにドロップダウンメニューが展開されます。

CSSで作る分割ボタン（スプリットボタン）式ドロップダウンメニューの実装方法

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで画面を50/50に分割する方法を徹底解説

    CSSを使えば、画面を左右に均等（50/50）に分割するレイアウトを簡単に実装できます。ポイントは、position: fixed と width: 50% を組み合わせることです。左側の要素には left: 0 を、右側の要素には right: 0 を指定することで、それぞれが画面の半分を占めるようになります。 実装手順のポイント 左右両方のコンテナに width: 50% を設定して、画面幅の半分ずつを確保します。 position: fixed と top: 0 を指定して、要素を画面全体に対して固定配置します。 z-index: 1 を設定することで、他の要素より前面に表示されます。