Vanilla JavaScript Projects

Project 51, Website sections

Mega Menu Navigation

The big dropdown menu you see on shop and news sites, built without a library. It works with a mouse, a keyboard and a thumb.

Main API
Pointer and keyboard events
Pattern
Disclosure navigation
Dependencies
None
Your browser
Checking

Try the menu

Hover or click Shop, Learn or Company. Use Tab, the arrow keys and Escape. Switch to phone view to see the drawer.

How it works

  1. Buttons, not linksEach top item is a button with aria-expanded, so screen readers announce open and closed.
  2. Hover with a delayA short timer stops menus flickering open when the mouse just passes over.
  3. One key mapArrow keys move between items, Down opens a panel and Escape closes it and returns focus.
btn.addEventListener("keydown", (e) => {
  if (e.key === "ArrowDown") { open(btn); panel.querySelector("a").focus(); }
  if (e.key === "Escape") { close(); btn.focus(); }
});
item.addEventListener("pointerenter", () => {
  clearTimeout(timer);
  timer = setTimeout(() => open(btn), 120); // hover intent
});