3 ドット → クロスに変わるメニュー
このメニューボタンは、円形の枠のなかに縦並びした 3 つの小さなドットを置き、開いた状態では各ドットが横長のバーへ伸びて斜めの X マーク に連結する変形ボタンです。動きは CSS の transition と transform だけで実現し、JavaScript は aria-pressed 属性を true…
解説
このメニューボタンは、円形の枠のなかに縦並びした 3 つの小さなドットを置き、開いた状態では各ドットが横長のバーへ伸びて斜めの X マークに連結する変形ボタンです。動きは CSS の transition と transform だけで実現し、JavaScript は aria-pressed 属性を true/false で切り替えるだけ。閉時は点、開時は width:24px の線へと滑らかに育つのが特徴です。
向いている場面
- 縦三点リーダー（︙）を採用する SaaS や管理画面の操作メニュー
- カードやテーブル行ごとの「その他の操作」トリガー
- 余白を活かしたミニマルなヘッダー
色は枠線とドットの #1a1a2e、開時の反転背景をブランド色に差し替えれば印象を変えられます。速度は .4s が基準で、もたつくなら .3s 前後に。点が線へ大きく動くため、prefers-reduced-motion で変形量を抑える配慮があると親切です。aria-pressed を持たせているので開閉状態が支援技術にも伝わります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ドットの色や開いた時の背景色を変えられますか？
はい。ドットと枠線は #1a1a2e で指定されているので、ここをブランド色に置き換えてください。開いた状態の背景は aria-pressed が true のときの背景指定（#1a1a2e）を、文字色相当のドットは白を変えれば配色を自由に調整できます。
JavaScript は必須ですか？
変形そのものは CSS だけで動きますが、開閉の状態管理に最小限の JS を使っています。aria-pressed を true/false で切り替える数行だけなので、フレームワークは不要で、そのまま貼り付けて使えます。