142 CSS Menu

About the code

Off-Canvas Menu

Pure CSS off-canvas menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS Folding Menu

A simple yet beautiful folding menu made in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Fun Hover Navigation

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

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.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Interactive Radial Menu

Interactive radial menu in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Creative Hamburger Menu

Hamburger menu using the new clip-path CSS property.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Circle Menu

nice pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Nice Effect For Navigation

Excellent hover and click effect for navigation bar or other.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Drop Down Menu

CSS only drop down menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Navigation Menu

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Jelly Menu

Jelly menu concept in HTML, CSS and JS.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Navigation Buttons

UI navigation buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

About the code

3D Navbar

3D navbar in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Just Another Menu

Pure CSS floating menu animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Menu Feat. Emoji

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Code Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Grid Menu Panels

Animated CSS grid-based menu panels. Click the toggle in the top left corner to see it in action.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

The Menu

Table contents style menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Circle Menu

Pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Menu

Toggle menu in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Dropdown Menu

Custom dropdown menu.

About the code

Hover Effect for Horizontal Menu

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Menu Animations CSS Only

Here is a collection of menu animations made strictly with CSS. As you can see, the JavaScript file for this project is completely empty.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Responsive Sidebar/Navbar

Vertical/Horizontal responsive sidebar/navbar.

About the code

Off-Canvas Navigation w/Page Transitions

More experimentation with transitions and navigation. Decided to add in a little bit for page transitions as well.

About the code

Sidebar Template

Sidebar template with drop down menu based on Bootstrap.

About the code

Sidebar Indicators

Sidebar menu with indicators.

About the code

Circle Navigation

Experimental navigation menu for a technical website. Built with GreenSock Animation Platform and SVG.

About the code

Submenu Expand

A playful animation expanding the submenu on the toolbar in web apps. Translates, fades and morphes SVG icons. Inspired by Virgil Panas more submenu transition on dribbble.

About the code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

About the code

Radial/Circular Menu Concept

Experimenting with radial menus. Inspired by the right-click-to-expand radial menus of Rust. Change the number of menu items in the bottom right to see how it works with a different number of menu items.

About the code

Dropdown Menu

Nice dropdown menu.

About the code

Fixed Navigation Sidebar

This is a layout/design playground for a work project. Utilising Bootstrap instead of Flexbox for IE9/10 support. Will use media queiries to serve pull page menu based on bootstrap breakpoints.

About the code

Fullscreen Menu

Fullscreen menu with Flexbox & jQuery.

About the code

Admin Sidebar

Admin sidebar HTML and CSS menu.

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

About the code

Dropdown Menu

Dropdown menu with jQuery.

About the code

Real Fullscreen Navigation

A full viewport responsive navigation.

About the code

Style Dropdown Menu

Recently stripe.com Redesign it site, and the primary menu interaction really grab my attention. So here is the simple version of it.

About the code

Fullscreen Menu

Simple full screen menu that fades in when menu icon is clicked.

About the code

CSS Staggered Animation Dropdown Menu

This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu.

About the code

Floating Circular Menu

Pretty floating circular menu with HTML, CSS and JS.

About the code

Fullscreen Menu Flexbox Style

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

About the code

Dropdown Menu Animation

Nice dropdown menu with animation.

About the code

Mobile Navigation Animation

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

About the code

SVG UI Navigation Concept

Just SVG & CSS3 animations, without any animation libraries.

About the code

Dropdown Menu

Dropdown menu with little jQuery.

About the code

Dropdown

Pretty dropdown menu.

About the code

SVG Gooey Hover Menu Concept

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

About the code

Sidebar Navigation

Sidebar navigation with tooltips.

About the code

Fullscreen Navigation

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

About the code

Menu Fullscreen

Menu fullscreen CSS.

About the code

Details Info & Navigation

Navigation with jQuery, CSS and HTML.

About the code

Full Screen Navigation Overlay

An example of a full screen navigation overlay utilizing flexbox.

About the code

Circular Material Menu

Unusual circular menu.

About the code

Frosty Nav Toggle Effect

HTML, CSS and jQuery frosty navigation toggle effect.

About the code

Gooey Mobile Navigation

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

About the code

Fullscreen Navigation

Fullscreen navigation with HTML, CSS and JS.

About the code

Fullscreen Menu

Simple fullscreen menu.

About the code

Off Canvas Nav

Sass off-canvas navigation.

About the code

CSS Dropdown Menu

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

About the code

Mobile Menu

HTML, CSS and jQuery effect for mobile menu.

About the code

Accessible Fullscreen Overlay Menu

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

About the code

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.

About the code

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.

About the code

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.

About the code

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.

About the code

Fullscreen Menu

Fullscreen hamburger menu.

About the code

Off-Canvas Menu Effects

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

About the code

Radial Menu

Animated radial menu.

About the code

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

About the code

CSS Off Canvas Menu

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

About the code

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.

About the code

Circular Navigation Popout

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

About the code

Dropdown Menu UI

Pure CSS dropdown menu.

About the code

Touch Device Jelly Menu Concept

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

About the code

Circular Links Menu

Responsive circular links menu.

About the code

Horizontal Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Bounce Mobile Menu

Menu animation with HTML, CSS and jQuery.

About the code

Circular Navigation With CSS

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

About the code

Flexbox Off Canvas Menu

Lightweight, simple, easy to use.

About the code

Dropdown Menu

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

About the code

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.

About the code

Mega Dropdown

A responsive and easy to customise mega-dropdown component.

About the code

Responsive Mega Menu

Responsive mega menu for mobile view.

About the code

Responsive Mega Menu

Responsive mega menu with flexbox.

About the code

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

About the code

Responsive Mega Menu

Responsive mega menu with blog, images and drop down.

About the code

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.