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

 <!-- `popovertarget` on the `button` connects to the `id` on the `popover` -->
 <button popovertarget="menu">
    Toggle Menu
 </button>
<nav popover="manual" id="menu" role="menu">
  <!-- This examples uses a "manual" popover, which requires an explicit close; use the same `id` for the `popover` -->
  <button popovertarget="menu" popovertargetaction="hide">Close</button>
  <ul>
     <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;
  /* 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);
    }
  }
  padding-top: 2rem; /* Make room for the "close" button */
  position: relative; /* Add close button positioning */
  & button { /* Position the button */
    position: absolute;
    top: .5rem;
    left: 1em;
  }
}

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.