Offscreen Nav - Add Close Button

Using the native HTML popover attribute, you can also use the native HTML popovertargetaction attribute to create a native open/close method for 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 close button positioning */
    position: relative;
    & button {
      position: absolute;
      top: .5rem;
      right: 1em;
    }
  }
}

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.