{"id":215,"slug":"rule-implement-megamenu-with-hover-delay","title":"RULE: Mega menu hover delay 500ms before show, 100ms reveal. Mobile uses accordion / sequential, not the same mega menu.","kind":"rule","scope":"business","status":"current","audiences":["claude-code","dev","candid-team"],"topics":["agency-methodology","navigation-design"],"reference_body":"**Rule:** Mega menu implementation on Candid client sites follows NN/g's timing protocol:\n\n- Hover the nav item for **500ms** before showing the mega menu\n- Once triggered, the mega menu appears within **100ms** (feels responsive, not laggy)\n- Cancel the show timer on `mouseleave` of the nav item\n- Touch users get **immediate** response on tap (no hover state)\n- **On large screens**, the mega menu does not cover the entire screen — cap at content max-width, leave the page below visible\n- **On mobile**, use accordion or sequential menu, NOT the same mega menu pattern, and NOT split buttons (fat-finger conflicts)\n\n**Why:**\n- [[nng-mega-menu-hover-protocol-500ms]] for the 500/100ms protocol\n- [[nng-megamenu-dont-cover-entire-screen]] for the size constraint\n- [[mobile-nav-sequential-not-split-button]] for mobile patterns\n\n**How to apply:**\n- Use a battle-tested mega menu library or hand-roll with `setTimeout`/`clearTimeout` against `mouseenter`/`mouseleave`\n- Test on touch devices: tap-to-open with explicit close affordance, not hover-to-open\n- The desktop and mobile nav are **different patterns** triggered by viewport breakpoint, not a single responsive component","rationale_body":null,"metadata":null,"links":{"outgoing":[{"slug":"nng-mega-menu-hover-protocol-500ms","title":"NN/g mega-menu hover protocol: wait 0.5s before showing, then display within 0.1s","kind":"reference","scope":"business","link_type":"depends-on"},{"slug":"nng-megamenu-dont-cover-entire-screen","title":"NN/g: \"On large screens, don't cover the entire screen when megamenus are open\" (Apr 30 2023)","kind":"reference","scope":"business","link_type":"depends-on"},{"slug":"mobile-nav-sequential-not-split-button","title":"NN/g: split buttons unreliable on touch (fat-finger conflicts) — use sequential menus or accordions on mobile","kind":"reference","scope":"business","link_type":"depends-on"}],"incoming":[{"slug":"research-brief-ia-multi-vertical-service-business","title":"Research brief: Information architecture for service businesses with multiple verticals (piece 6 of 15)","kind":"reference","scope":"business","link_type":"relates-to"}]},"created_at":"2026-05-22T19:40:49.169Z","updated_at":"2026-05-22T19:40:49.169Z"}