Offscreen Nav - Animate Open/Close

Use CSS to create a native visual open and/or close animation 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);
      }
    }
  }
}
/* Animate nav open/close, if user is okay with animation */
@media (prefers-reduced-motion: no-preference) { /* Be nice to others */
  nav ul {
    transition: translate 150ms;
  }
}

JS

No JS required.

Baseline

[`animations-css`](https://webstatus.dev/features/animations-css)

CodePen

See the Pen on CodePen.