Offscreen Nav - Add Backdrop

Use ::backdrop via CSS to create a native visual layer between your offscreen nav element, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

HTML

<nav>
   <!-- `popovertarget` on the `button` connects to... -->
   <button popovertarget="menu">
      Toggle Menu
   </button>
   <!-- ...the `id` on the `ul` -->
   <ul popover id="menu" role="menu">
     <li>Nav option 1</li>
     <li>Nav option 2</li>
     <li>Nav option 3</li>
     <li>Nav option 4</li>
     <li>Nav option 5</li>
     <li>Nav option 6</li>
     <li>Nav option 7</li>
     <li>Nav option 8</li>
     <li>Nav option 9</li>
     <li>Nav option 10</li>
   </ul>
</nav>

CSS

nav {
  /* Set as custom properties for consistency */
  --hidden: -100vw;
  --visible: 0;
  ul {
    /* Override User-Agent styles */
    margin: 0; /* Prevents center/center */
    border: 0; /* Kills fat black border */
    /* Start offstage... */
    translate: var(--hidden);
    /* ... and move onstage when open */
    &:popover-open {
      translate: var(--visible);
      @starting-style {
        translate: var(--hidden);
      }
    }
    /* Add backdrop */
    &::backdrop {
      background: rgb(0 0 0 / 50%);
    }
  }
}

JS

No JS required.

Baseline

[`popover`](https://webstatus.dev/features/popover)

CodePen

See the Pen on CodePen.