detailsタグで背景クリックでも閉じるポップアップメニューを実装する

  • メニューの外側をクリックしても閉じるポップアップメニューをよく見かけるが、開閉時・背景クリック時の処理をjsで制御したくないのでHTML・CSSのみで実装したい
  • 今回は<details>で実装してみる
    • input[type="checkbox"]はタグ本来の役割から逸れるため除外
    • そもそもモーダルではないので<dialog>は選択肢から除外
  • <details>でどのようにして背景クリックで閉じるようにするか

解決法

details[open] summary + * {
position: relative;
}
details[open] summary::before {
position: fixed;
inset: 0;
content: '';
}
  • <summary>の擬似要素を画面いっぱいに広げることで、コンテンツ要素の外側をクリックした際にも閉じるようにする
  • 擬似要素がコンテンツ要素の上に重なることを防ぐためにposition: relativeを指定する
動画でより詳しく話しています