ハンバーガー → クローズ形状に変形するメニューボタン
このボタンは、3 本線がなめらかに×印(クローズ形状)へ変形するモバイルメニュー用のトグルです。3 つの span を縦に並べ、 aria-pressed 属性の値で見た目を切り替えます。開いた状態では 1 本目と 3 本目が translateY で中央に寄りつつ rotate(45deg) で斜めに交差し、2…
解説
このボタンは、3 本線がなめらかに×印(クローズ形状)へ変形するモバイルメニュー用のトグルです。3 つの span を縦に並べ、aria-pressed 属性の値で見た目を切り替えます。開いた状態では 1 本目と 3 本目が translateY で中央に寄りつつ rotate(45deg) で斜めに交差し、2 本目は opacity:0 で消えて×を形作ります。変形は transition で滑らかにつながります。状態の切替は短い JavaScript が担い、クリックのたびに aria-pressed と aria-label を反転させます。
使う場面
- スマホ・タブレット向けナビゲーションの開閉トグル
- サイドメニューやオフキャンバスメニューの起動ボタン
- 画面幅が狭いときだけ表示するモバイルヘッダー
線の色は .hb span の background、ボタンの地色は .hb の background で変えられます。線を太くするなら height:2px を増やします。実装上の利点は、開閉状態を aria-pressed で持つためスクリーンリーダーにも状態が伝わる点です。実際のメニュー本体の表示・非表示は、この属性に連動させて切り替えると一貫します。動きが苦手なユーザー向けに transition を弱める配慮も足せます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
このボタンを押すと実際にメニューも開きますか？
このスニペット自体はアイコンの形状変化と aria-pressed の切替までを担当します。実際のメニュー表示は、aria-pressed が true のときにメニュー本体を表示する CSS や JavaScript を追加して連動させてください。
線の色や太さを変えたいです。
線の色は .hb span の background、ボタンの地色は .hb の background で変えられます。線を太くしたい場合は span の height(初期 2px)を増やし、3 本の間隔は gap で調整します。