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

サイト構築 -制作

Post on:2022年10月25日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

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

オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLと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には、ポップさせたいpopupのidを参照します

<button class="icon leading" popuptoggletarget="menu"></button>

<div popup id="menu" role="menu">
  <nav>
    <a href="#" autofocus>Explainer</a>
    <a href="#">CodePen Collection</a>
    <a href="#">Article</a>
  </nav>
</div>

<nav>

<a href="#" autofocus>Explainer</a>

<a href="#">CodePen Collection</a>

<a href="#">Article</a>

</nav>

</div>

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

:root {
  --nav-width: 240px;
}
[popup] {
  top: 0;
  left: 100%;
  margin: 0;
  height: 100vh;
  box-shadow: var(--shadow-3);
  border: 0;
  width: var(--nav-width);
  transition: transform 0.2s;
  transform: translateX(calc(var(--open, 0) * -100%));
  background: var(--gray-0);
}

header {
  background: var(--gray-0);
}

[popup]::backdrop {
  transition: opacity 0.2s;
  background: hsl(0 0% 10% / 0.25);
  opacity: var(--open, 0);
}

[popup]:open,
[popup]:open::backdrop {
  --open: 1;
}

body:has([popup]:open) {
  transform: translateX(calc(var(--nav-width) * -1));
}

:root {

--nav-width: 240px;

}

[popup] {

top: 0;

left: 100%;

margin: 0;

height: 100vh;

box-shadow: var(--shadow-3);

border: 0;

width: var(--nav-width);

transition: transform 0.2s;

transform: translateX(calc(var(--open, 0) * -100%));

background: var(--gray-0);

}

header {

background: var(--gray-0);

}

[popup]::backdrop {

transition: opacity 0.2s;

background: hsl(0 0% 10% / 0.25);

opacity: var(--open, 0);

}

[popup]:open,

[popup]:open::backdrop {

--open: 1;

}

body:has([popup]:open) {

transform: translateX(calc(var(--nav-width) * -1));

}

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

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

Lil future HTML/CSS Tip! ✨

Create an off-canvas menu with the Pop-up API and CSS :has() 😎 No JS required!

<button popuptoggletarget=menu>
<nav id=menu popup>

body:has([popup]:open) {
translate: calc(var(--nav-width) * -1) 0;
}

Demo link/info below! 👇 pic.twitter.com/BgKbZmn7jn

— 👻 jheyQuery v6.6.6 🔨🎃✨ (@jh3yy) October 13, 2022