Stacked Card Pull-Down Navigation

This is a Stacked Card Pull-Down Navigation. It transforms a standard mobile menu into a tactile, deck-like interface that cascades down from the viewport’s top edge. Its primary function is to provide an engaging, full-screen routing experience, replacing the traditional hamburger icon with an interactive, overlapping layer system that optimizes touch targets.

Specs

• Weight: ~3 KB (Zero dependencies).
• Performance: Fluid 60fps. Relies strictly on hardware-accelerated transform and opacity for its animation states.
• Theming: Powered by root CSS variables (--hue, --bg, --fg). Features automatic dark mode detection via @media (prefers-color-scheme: dark).
• Responsiveness: Mobile-first architecture. The layout naturally constraints to the viewport width, locking background scroll (overflow: hidden) when active.
• Graceful Degradation: Features @supports selector(:focus-visible) for progressive accessibility enhancement, ensuring focus rings only appear for keyboard users.

Anatomy

• HTML: An inline SVG symbol library (<svg display="none">) caches icons for reuse. The navigation is a semantic <nav> wrapping a standard unordered list.
• CSS: Absolute positioning handles the initial state. Items are forced under each other using negative z-index and a base translateY offset to hide them out of frame.
• JS: An ES6 CardNav class. It intercepts clicks, toggles the .nav--open modifier, isolates the active menu item, and locks the document body’s scrollbar.

Logic

The cascading expansion is purely CSS-driven, avoiding complex JavaScript timeline calculations.

.nav--open .nav__item:nth-of-type(2) {
	transform: translateY(100%);
}
.nav--open .nav__item:nth-of-type(3) {
	transform: translateY(200%);
}

When JS adds the .nav--open class, each sibling item is mathematically pushed down by a multiple of its own height (100%, 200%, 300%). Paired with a staggered transition-delay on the nested icons, the CSS engine autonomously orchestrates a complex, physical unfolding sequence.

Feel

Physical and snappy. Opening the menu feels like fanning out a deck of cards or pulling down a heavy blind. The rigid, blocky colors combined with the crisp drop shadows give the digital elements undeniable mass. It provides immediate, high-contrast feedback.