サイドドロワー（左から引き出し）
サイドドロワーは、ハンバーガーボタンを押すと画面左端から横にスライドして出てくるナビゲーションパネルです。パネルに position:fixed と transform:translateX(-100%) を指定して普段は画面外へ隠し、開くときに translateX(0) へ切り替えて引き出します。
解説
サイドドロワーは、ハンバーガーボタンを押すと画面左端から横にスライドして出てくるナビゲーションパネルです。パネルに position:fixed と transform:translateX(-100%) を指定して普段は画面外へ隠し、開くときに translateX(0) へ切り替えて引き出します。同時に半透明オーバーレイが暗くなり、その外側か右上の閉じるボタンでパネルを閉じられます。動きは cubic-bezier のイージングで滑らかです。
使う場面
- スマホでグローバルナビをまとめて格納するハンバーガーメニューとして
- 会員向けの設定パネルやアカウントメニューを横から出したいとき
- 項目数が多く、ヘッダーに収まらないリンク群を整理したいとき
パネル幅は width:280px で調整できます。閉じるボタンには aria-label="閉じる" が付いており、画面読み上げでも役割が伝わります。さらに使いやすくするなら、開いた直後にパネル内の最初のリンクへフォーカスを移し、Esc キーで閉じられるようにすると操作性が上がります。リンクのホバー色 #667eea をブランド色に合わせると統一感が出ます。
よくある質問
右側から出るドロワーにできますか。
できます。.dr の left:0 を right:0 に変え、初期状態の translateX(-100%) を translateX(100%) に変えると右から出ます。影の向きも左右反転させると自然です。
パネルの幅を広げたいです。
.dr の width:280px を好みの値に変えてください。スマホで全幅に近づけたい場合は width を min(85vw, 320px) のように指定すると小さい画面でも収まります。