CSSの最新テクニック! シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装

この実装は、完全に想定外の発想でした!
スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。

オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。

オフキャンバスのメニューをポップアップで実装するCSSの最新テクニック

Pop-up API Off Canvas Menu w/ :has() ⚡️

実際の動作は、下記ページでご覧ください。
※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります(後述)。

サイトのキャプチャ

Pop-up API Off Canvas Menu w/ :has() ⚡️

まずは、HTMLを見てましょう。
ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。popuptoggletargetには、ポップさせたいpopupidを参照します

ポップアップが開いたら、CSSで動作を指示できます。ここでのポイントはL.32-35、:has()でポップアップが開いていることを判定して、スタイルを適用することです。

Pop-Up APIと:has()については、以前の記事もご覧ください。

デモページを見るには、前述の「ChromeでFlagを有効」にします。
Chromeのアドレスバーに「chrome://flags」を入力し、「Experimental Web Platform features」を「Enabled(有効)」にします。

サイトのキャプチャ

chrome://flags/にアクセス

Flagを有効にしてから、下記のデモページをご覧ください。
※Chrome 106で期待通りに動作します。

See the Pen
Pop-up API Off Canvas Menu w/ :has() ⚡️
by Jhey (@jh3y)
on CodePen.

Pop-Up APIはChrome 106から実験的機能、110で実装が予定されています。詳しくは、下記をご覧ください。

サイトのキャプチャ

Feature: The Pop-Up API

元ネタは下記ツイートより。

sponsors

top of page

©2022 coliss