角度回転で X に変形するメニューボタン
これはハンバーガーメニューの3本線が、上下の線を逆方向へ約45度回転させて X マークに変形するメニューボタンです。中央の線は左へスライドしながら消えます。状態は aria-pressed 属性で管理し、クリックのたびに true と false を切り替えます。
解説
これはハンバーガーメニューの3本線が、上下の線を逆方向へ約45度回転させて X マークに変形するメニューボタンです。中央の線は左へスライドしながら消えます。状態は aria-pressed 属性で管理し、クリックのたびに true と false を切り替えます。CSSの transition に cubic-bezier のイージングを指定しているため、線の回転と消失がなめらかに連動します。JavaScript は属性を切り替えるだけのごく短い記述です。
使う場面
- スマホ・タブレットのナビゲーション開閉ボタン
- サイドメニューやドロワーのトリガー
- 開閉状態を視覚的にはっきり示したいヘッダー
変形は [aria-pressed="true"] 状態の transform で制御しており、回転角度や移動量を変えれば挙動を調整できます。ボタンの色や角丸は .mb-rot で変更可能です。状態管理に aria-pressed を使っているのが要点で、押されているかどうかがスクリーンリーダーにも伝わります。実際にメニューを開閉する際は、対象メニューの表示切り替え処理を別途つなぐ必要があります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
開閉の状態はどう管理していますか？
ボタンの aria-pressed 属性で管理しています。クリックのたびに true と false を切り替え、その値に応じて CSS が線の変形を行います。アクセシビリティ的にも状態が伝わる仕組みです。
このボタンで実際にメニューも開きますか？
このスニペットはアイコンの変形アニメーションが対象です。実際のメニュー表示・非表示は、aria-pressed の値に合わせてナビゲーション要素を開閉する処理を追加してつなぎます。