515文字
3分
編集

CSSのみで開閉可能なサイドバーを実装する

#CSS

Popover API を利用すれば、CSS だけで高機能なサイドバーを実装できます。次のボタンを押すと実際にCSSのみで実装されたサイドバーが開きます。

#HTML構造

このサイドバーの、HTML構造はかなりシンプルです。Popover APIの属性は比較的分かりやすく、Popoverとなる要素にpopover属性を付与し、トリガーとなる要素にpopovertarget属性を付与、特定のアクションのみを実行したい場合はpopovertargetaction属性を付与します。

html
<button popovertarget="sidebar">
  Open Sidebar
</button>

<aside popover id="sidebar">
  <h2>Sidebar Content</h2>
  <button popovertarget="sidebar" popovertargetaction="hide">
    Close Sidebar
  </button>
  <p>This is the content of the sidebar.</p>
</aside>

#CSSの記述

CSSもかなりシンプルです。:popover-openでPopoverが開いている状態、::backdrop疑似要素でPopoverが開いている状態の背景を設定できます。

css
aside[popover] {
  position: fixed;
  top: 0;
  height: 100vh;
  translate: -100% 0;
  transition: 0.2s;
}
aside[popover]:popover-open {
  display: block;
  translate: 0 0;
  @starting-style {
    translate: -100% 0;
  }
}
aside[popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  @starting-style {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }
}
aside[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: 0.3s;
}

難しいとすれば、@starting-styleと:popover-openが付いていない状態で記述が重複しているように見えることではないでしょうか。しかし、これはどちらも必要で、@starting-styleがなければ開く際のアニメーションが、:popover-openがない側の記述がなければ閉じる際のアニメーションが実行されません。