127 CSS Menus
This collection offers a comprehensive set of solutions for building navigation menus with pure CSS. Flexbox is utilized to construct responsive layouts, ranging from horizontal bars to vertical sidebars, with spacing managed via gap. Visual interactivity is achieved using pseudo-elements creating animated underlines and background effects on hover. Special attention is paid to accessibility: semantic markup and :focus-visible styling ensure convenient keyboard navigation and screen reader support.
Last updated:
Side Navigation with Icons
A vertical CSS-only navigation menu where hovering triggers a smooth animation: the icon scales up and changes color while the text label fades out, emphasizing the visual symbol.
:has() Pseudo-Class Selector
An elegant and intuitive menu that helps the user focus on the item of interest by visually dimming the others.
Jackie's Pet Store
A responsive pet store landing page built with CSS Grid and Flexbox. It features a dynamic navigation system with hover-triggered mega-menus, gradient-styled product cards with scale transitions, and a comprehensive use of CSS variables for consistent theming across breakpoints.
Animated Menu Bar with Hamburger
A demonstration of a two-phase menu reveal animation - a fast transform: translateX shift and a slower width expansion are defined in a single transition property, creating a distinct visual effect.
Colorful Popup Hamburger Menu
A “fan-out” circular menu in pure CSS, where the hamburger icon animation and cascading item reveal are triggered by the “checkbox hack.” The reveal effect uses transform: translate3d() with transition-delay, and the animation’s liveliness is achieved through complex cubic-bezier curves, giving it a natural “elastic” bounce.
Mac Dock Magnify Effect with :has
A Dock menu where the scaling effect on hover is implemented entirely in CSS using :hover and :has() selectors - this allows scaling not only the active element but also its neighbors.
Neon Icon Hover Effect
A navigation menu with a neon glow and a complex hover effect. Icons and text use the CSS drop-shadow filter to create a glow effect, while the element’s color is controlled via an inline CSS variable --clr.
Emerging Dropdown Menu
This interactive component features a visually striking dropdown effect where the menu container morphs into shape using pure CSS animation of the SVG stroke-dashoffset property. It uses a separate SVG element with a Gaussian blur filter to create a subtle, soft shadow that follows the menu’s outline when expanded.
Futuristic Interactive Dropdown
This striking Sci-Fi dropdown leverages SCSS @for loops and conditional logic to dynamically stagger menu items in their hidden state. The dramatic reveal animation is achieved using complex CSS 3D transforms and skewing activated entirely by a single parent hover state.
Damped Menu Bar using CSS @property
A superb demonstration of physically accurate damped oscillation animation, achieved using a registered CSS property (@property --progress) that controls trigonometric functions within calc() to drive the elements’ 3D movement.
Wobbly Underline Menu Effect
An elegant “Snake” navigation indicator effect using an SVG path and the pure CSS technique of ‘stroke-dasharray’/‘stroke-dashoffset’ for fill animation, where JavaScript is used only to toggle directional classes.
CSS Var Only Sidebar Toggle
This animated sidebar is built entirely with pure CSS using modern features. The key is @property for a smooth width transition and the :has() selector to track a checkbox’s state, enabling animation control without a single line of JavaScript.
Space Nav: A Full-Screen Menu
An impressive menu example where all visuals are built with pure CSS and SVG. Clicking the burger icon triggers smooth animations for gradients, SVG arcs, and the background, while changing the overall page state with a single class.
London Tube Map Navigation
A navigation component that showcases a clever use of CSS variables (--index, --position) for dynamic positioning. JavaScript is only used to update these variables on mouseover and click events, enabling complex and interactive animations.
Responsive Sidebar
A flexible and customizable sidebar built with CSS Custom Properties - sizes, spacing, and colors are easily configurable. The complex choreography of element appearance is achieved through transition-delay, and tooltip content is sourced from data-* attributes.
