TOP 135 CSS Menu

TEXT FILL ON HOVER

Filling the text with a different color on hover – a creative text effect.

CIRCLE LINKS

CSS FULL-PAGE NAVIGATION

PURE CSS SINGLE PAGE APPLICATION

RANDOMLY GENERATED CSS BLOBBY NAV

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter.

FULL-PAGE NAVIGATION

PURE CSS FULL PAGE NAV

FULL PAGE NAV

A concept design of full-page navigation, full of typography, and using icons as large images.

FOLD OUT MOBILE MENU

CSS only fold out mobile menu.

MENU HOVER FILL TEXT

Menu hover fill text (color + background-clip).

DROP DOWN MENU

Smooth drop down menu.

MENU WITH AWESOME HOVER

MENU HOVER UNDERLINE

APPLE TV MENU INTERFACE

CSS STRANGE NAV

Made a strange navigation. CSS only. Let’s Click!

NAVIGATION WITH SUB-NAVIGATION

CSS NAVIGATION

Click the toggle to open the menu and see the magic. This experiment relies on the only CSS to style, animate and position elements.

NAVBAR WITH PURE CSS

NAVBAR INTERACTION

PURE CSS DROPDOWN MENU

THE CIRCULAR MENU

Using border-radius and clipping paths to create a circular fan like menu.

OFF CANVAS MENU PURE CSS

Off canvas menu pure CSS by using only CSS.

MENU BAR CSS

VERTICAL DARK MENU WITH CSS

Simple vertical dark menu with CSS and icons.

THE MORE MENU

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

OFF-CANVAS MENU

Pure CSS off-canvas menu.

MOVING UNDERLINE NAV MENU

CSS FOLDING MENU

A simple yet beautiful folding menu made in CSS.

FUN HOVER NAVIGATION

Fun navigation effect using CSS keyframes. A quick jump back to the old school.

PURE CSS MAGIC LINE NAVBAR

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

See the Pen Pure CSS Magic Line Navbar by Rock Starwind (@RockStarwind) on CodePen.

CIRCLE MENU

nice pure CSS circle menu.

POSITION STICKY SUBNAV

Sticky subnavigation in pure CSS.

DROP DOWN MENU

CSS only drop down menu.

NAVIGATION MENU

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

See the Pen Futuristic 3D Hover Effect 🛸 by Jouan Marcel (@jouanmarcel) on CodePen.

3D NAVBAR

3D navbar in HTML and CSS.

JUST ANOTHER MENU

Pure CSS floating menu animation.

PURE CSS MENU

Pure CSS menu drawer with off-click.

CSS MENU FEAT. EMOJI

THE MENU

Table contents style menu.

CIRCLE MENU

Pure CSS circle menu.

PERSPECTIVE MENUS

CSS only perspective menus.

MENU EFFECT

Reverse text color menu effects.

HOVER EFFECT FOR HORIZONTAL MENU

Pure CSS fading out for siblings menu options on option hover.

CSS-ONLY NESTED DROPDOWN NAVIGATION

CSS only nested dropdown navigation with ARIA.

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Demo and Download Demo and Download

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.

Demo and Download Demo and Download

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.

Demo and Download Demo and Download

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.

Demo and Download Demo and Download

FULLSCREEN MENU FLEXBOX STYLE

Chrome and Firefox good… IE bad, no transition support for flex property.

DROPDOWN MENU ANIMATION

Nice dropdown menu with animation.

MOBILE NAVIGATION ANIMATION

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking…

SVG UI NAVIGATION CONCEPT

Just SVG & CSS3 animations, without any animation libraries.

DROPDOWN MENU

Dropdown menu with little jQuery.

DROPDOWN

Pretty dropdown menu.

SVG GOOEY HOVER MENU CONCEPT

Uses SVG path manipulation based on mouse position to ‘chase’ the user’s position.

SIDEBAR NAVIGATION

Sidebar navigation with tooltips.

FULLSCREEN NAVIGATION

Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.

Header Navigation Menu

Header navigation menu with HTML, CSS and jQuery.

Demo and Download Demo and Download

MENU FULLSCREEN

Menu fullscreen CSS.

Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.

Demo and Download Demo and Download

DETAILS INFO & NAVIGATION

Navigation with jQuery, CSS and HTML.

CSS3 + jQuery Fullscreen Menu

Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.

Demo and Download Demo and Download

FULL SCREEN NAVIGATION OVERLAY

An example of a full screen navigation overlay utilizing flexbox.

CIRCULAR MATERIAL MENU

Unusual circular menu.

Semicircular Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

Demo and Download Demo and Download

Sliding Navigation Menu

Sliding navigation menu is hidden by default.

Demo and Download Demo and Download

4 Fullscreen Navigation

4 Fullscreen navigation with HTML, CSS and jQuery.

Demo and Download Demo and Download

Fullscreen Navigation

CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/

Demo and Download Demo and Download

FROSTY NAV TOGGLE EFFECT

HTML, CSS and jQuery frosty navigation toggle effect.

Hamburger Icon With Morphing Menu

Creative menu made with HTML, SASS/CSS3 and JQuery.

Demo and Download Demo and Download

Dropdown Navigation

Dropdown navigation with HTML, CSS and JavaScript

Demo and Download Demo and Download

Full Screen Navigation Using SVG

Full screen navigation using SVG, HTML, CSS and jQuery.

Demo and Download Demo and Download

GOOEY MOBILE NAVIGATION

The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.

FULLSCREEN NAVIGATION

Fullscreen navigation with HTML, CSS and JS.

Colourful Navigation

When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.

Demo and Download Demo and Download

Simple JS Mobile Navigation

Simple JS mobile navigation with HTML and CSS.

Demo and Download Demo and Download

FULLSCREEN MENU

Simple fullscreen menu.

Explosive Menu

A, rather explosive, menu is just a click away. All you have to do is say fire.

Demo and Download Demo and Download

OFF CANVAS NAV

Sass off-canvas navigation.

Solution For Long Drop Down Items

Problem with long drop down menus? Well, try this simple solution with the use of JavaScript and jQuery.

Demo and Download Demo and Download

Full-Screen Menu Overlay

A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

Demo and Download Demo and Download

CSS DROPDOWN MENU

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

Fullscreen Menu

HTML, CSS and jQuery fullscreen menu.

Demo and Download Demo and Download

MOBILE MENU

HTML, CSS and jQuery effect for mobile menu.

ACCESSIBLE FULLSCREEN OVERLAY MENU

A fairly accessible fullscreen overlay menu built with jQuery and CSS.

QUICK AND EASY FULLSCREEN MENU

Crafted and debugged in 5 minutes, IE10+ compatible. Might not be ideal for production but would help you if you need a quick working responsive and modern menu.

FULL PAGE OFF-CANVAS NAVIGATION

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Offcanvas Sidebar Menu With A Twist

HTML, CSS and jQuery offcanvas sidebar menu with a twist.

Demo and Download Demo and Download

Off Canvas Menu

Little off canvas animated menu.

Demo and Download Demo and Download

Accordion Drop Down Menu

HTML, CSS accordion menu with jQuery. No plugins.

Demo and Download Demo and Download

Flat Vertical Navigation

A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css.

Demo and Download Demo and Download

A SIMPLE DROPDOWN MENU

Just a simple HTML and CSS dropdown menu.

Material Design Navigation

The page slides to reveal a clean, simple navigation.

Demo and Download Demo and Download

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.

Demo and Download Demo and Download

CSS3 Funny Side Menu

A funny CSS3 menu.

Demo and Download Demo and Download

FLAT HORIZONTAL NAVIGATION

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.

Flat Vertical Navigation

A simple flat vertical navigation with a simple dropdown menu.

Demo and Download Demo and Download

FULLSCREEN MENU

Fullscreen hamburger menu.

OFF-CANVAS MENU EFFECTS

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

RADIAL MENU

Animated radial menu.

Toggle Menu

Toggle menu with HTML, CSS and jQuery.

Demo and Download Demo and Download

PURE CSS TRANSITION EFFECTS FOR OFF-CANVAS VIEWS

You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. – Thomas Wilthil

CSS OFF CANVAS MENU

Another off canvas menu using the checkbox hack to active mobile navigation.

Side Accordion Menu

HTML, CSS, jQuery sidebar accordion menu.

Demo and Download Demo and Download

Fixed Flyout/Off-Canvas Navigation

A responsive fixed menu that’s always right there.

Demo and Download Demo and Download

DROPDOWN MENU

The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.

CIRCULAR NAVIGATION POPOUT

Full circular animated navigation in CSS. Perfect for mobile. Based on codrops’s circular navigation.

Animated Menu

A simple fullscreen menu.

Demo and Download Demo and Download

DROPDOWN MENU UI

Pure CSS dropdown menu.

TOUCH DEVICE JELLY MENU CONCEPT

Touch device jelly menu concept with HTML, CSS and JavaScript.

Vertical Accordion Menu Using jQuery And CSS3

A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.

Demo and Download

CIRCULAR LINKS MENU

Responsive circular links menu.

HORIZONTAL MENU

BOUNCE MOBILE MENU

Menu animation with HTML, CSS and jQuery.

CIRCULAR NAVIGATION WITH CSS

A tutorial on how to create a circular navigation using CSS transforms.

FLEXBOX OFF CANVAS MENU

Lightweight, simple, easy to use.

DROPDOWN MENU

This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

OFF CANVAS MENU WITH ANIMATED LINKS

A simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.

MEGA DROPDOWN

A responsive and easy to customise mega-dropdown component.

RESPONSIVE MEGA MENU

Responsive mega menu for mobile view.

RESPONSIVE MEGA MENU

Responsive mega menu with flexbox.

SEXY FLEXY MEGA MENU

I saw a gif of this style menu on Scout’s page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out. – Mike Torosian

RESPONSIVE MEGA MENU

Responsive mega menu with blog, images and drop down.

MEGA MENU DROPDOWNS WITH FOUNDATION 5

A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.