ボトムシート（モバイル用引き上げメニュー）
ボトムシートは、スマホアプリでおなじみの「画面下からせり上がってくるメニュー」です。シート本体に transform:translateY(100%) で初期状態を画面外へ隠し、開くときに translateY(0) へ変えることで下から滑り込ませます。
解説
ボトムシートは、スマホアプリでおなじみの「画面下からせり上がってくるメニュー」です。シート本体に transform:translateY(100%) で初期状態を画面外へ隠し、開くときに translateY(0) へ変えることで下から滑り込ませます。動きには cubic-bezier のイージングが効いており、最後にふわっと止まる自然な挙動になります。背景は半透明のオーバーレイで暗くし、その外側をタップすると closeBs() が呼ばれて閉じます。
使う場面
- 一覧の各項目に対する「編集・複製・共有・削除」などの操作メニューを出したいとき
- モバイルで画面を覆わずに選択肢を提示したいとき
- フィルターや並び替えなど、一時的な設定パネルを下から出したいとき
削除など注意が必要な項目は .bs__del で赤色にして区別しています。閉じる手段はオーバーレイのタップとキャンセルボタンの2通りです。アクセシビリティを高めるなら、開いている間は Esc キーでも閉じられるようにし、シート内へフォーカスを移すとより使いやすくなります。角丸の border-radius を調整すると印象が変わります。
よくある質問
せり上がる速度を変えられますか。
.bs の transition にある .35s が表示時間です。数値を大きくするとゆっくり、小さくするとキビキビ動きます。オーバーレイの .3s も合わせて調整すると自然です。
外側をタップしても閉じないようにできますか。
JavaScript の ov.onclick=closeBs; の行を削除すれば、オーバーレイのタップでは閉じなくなります。その場合はキャンセルボタンを閉じる唯一の手段として残してください。