Mega menu nav

What's included

A navigation bar with a mega menu, in two files: a stylesheet and a script, plus the font. No dependencies, no build step, no external requests — you copy the folder into a project and it works.

The component doesn't reinvent the dropdown: every panel is a browser <details>. That's what provides the button role, the collapsed or expanded state announced to screen readers and — thanks to the name attribute — the exclusivity between menus. The script only adds comfort: opening on hover, the closing animation, Escape, the arrow keys.

Features

• Opens on hover — on a device with a fine pointer, two adjustable delays do the work: one stops the bar unfolding under a mouse that's merely crossing it, the other covers the trip down to the panel. One attribute is enough to switch it off.
• Staggered entrance — the panel arrives in one piece, its content follows in a wave, left to right and top to bottom. Three variables tune it, and it switches off by setting the gap between two blocks to zero.
• Full keyboard support — Tab, Enter, Space, Escape, left and right arrows between menus, down arrow to step into the open panel. That's the WAI-ARIA “Disclosure Navigation Menu” pattern.
• Works without JavaScript — switch the script off: the menus still open, by mouse and by keyboard, and only one at a time.
• One variable for the scale — every measurement derives from the text size: bar height, corner radii, spacing, icon discs and chevron all follow together.
• Tint and backdrop blur — the bar and the panel are translucent, with a clean fallback on browsers that can't blur.
• Two variants — a form-density scale, and a version for light backgrounds.

Dropping it into a page

Two files to load, then the usual markup:

<link rel="stylesheet" href="mega-menu-nav.css">
<script src="mega-menu-nav.js" defer></script>
<nav class="mega-menu-nav" aria-label="Main navigation">
  <div class="mega-menu-nav__bar">
    <ul class="mega-menu-nav__links">
      <li class="mega-menu-nav__item">
        <details class="mega-menu-nav__disclosure" name="nav">
          <summary class="mega-menu-nav__trigger">Product</summary>
          <div class="mega-menu-nav__panel">…</div>
        </details>
      </li>
    </ul>
  </div>
</nav>

That's it: the script installs itself on page load, including on bars inserted later. The same name on every <details> in a bar is what keeps the exclusivity, even without JavaScript.

What you should know

• The tint takes the colour of whatever passes beneath it. The bar is a translucent white tint: on white, it can't be read. That's the nature of backdrop blur, not a flaw — on a light page you switch to the --lightvariant, which flips the tint without duplicating a single rule.
• Hover leaves nobody behind. A touchscreen isn't affected, the panel doesn't slip away as you move towards it, and as long as the keyboard is working inside it the mouse won't close it. That's what the WCAG 2.1 criterion on content on hover asks for.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML.
• The design comes from elsewhere. The proportions follow those of a commercial Framer component, measured to the pixel from its visual — the largest difference measured after overlaying is 0.91 px. The code itself is original: nothing was taken from its implementation.