73 Awesome CSS menu collection

Here is 73 awesome css menu collection list. Each item is hand picked on the basis of its reasonable size, easy integration into existing code and interactive look. Filter option is also provided for easy navigation and picking the right item for your project.

Note: Size of  the menu script is calculated as size of html code + CSS / SCSS / Less + Javascript (if any)

Dropdown Menu UI

Dropdown Menu UI
Author: Jeplaa
Size: 4.8 KB
Updated: February 07, 2019
Built Using: HTML / CSS

CSS3 based Responsive menu effect

CSS3 based Responsive menu effect
Size: 3.34 KB
Created: April 15, 2014
Built Using: HTML / LESS

Responsive overlay menu navigation

Responsive overlay menu navigation
Size: 8.55 KB
Updated: August 13, 2015
Built Using: HTML / CSS / Javascript

A simple and scalable hamburger menu

A simple and scalable hamburger menu
Author: Alex Newman
Size: 4 KB
Updated: July 02, 2015
Built Using: HTML / CSS / Javascript

Burger Menu inspired by Material Design

Burger Menu inspired by Material Design
Size: 4.58 KB
Updated: January 20, 2016
Built Using: HTML / CSS

Mobile Menu - Sidebar

Mobile Menu - Sidebar
Size: 75.5 KB
Updated: January 19, 2015
Built Using: HTML / CSS / jQuery (Javascript)

Hamburger icon with Morphing Menu

Hamburger icon with Morphing Menu
Size: 6.61 KB
Updated: August 16, 2017
Built Using: HTML / SCSS / jQuery (Javascript)

Responsive Mobile Menu with CSS

Responsive Mobile Menu with CSS
Size: 4.86 KB
Updated: February 14, 2017
Built Using: HTML / CSS

Full-Screen Menu Overlay

Full-Screen Menu Overlay
Author: Ettrics
Size: 0 KB
Updated: March 12, 2015
Built Using: HTML / SCSS / Javascript

Material Design - Sidebar (Profile menu)

Material Design - Sidebar (Profile menu)
Size: 36.6 KB
Updated: November 05, 2014
Built Using: HTML / LESS / jQuery (Javascript)

Expanding Burger/Menu Icon

Expanding Burger/Menu Icon
Author: Joe Harry
Size: 4.71 KB
Updated: January 19, 2016
Built Using: HTML / CSS / Javascript

Floatting Draggable Menu (Messenger like)

Floatting Draggable Menu (Messenger like)
Author: Andy Pagès
Size: 7.17 KB
Updated: August 22, 2016
Built Using: HTML / SCSS / Javascript

Pure CSS Circle Menu

Pure CSS Circle Menu
Author: Hadar Weiss
Size: 6.23 KB
Updated: June 22, 2015
Built Using: HTML / SCSS

Basic Responsive Menu

Basic Responsive Menu
Author: Ash Neilson
Size: 4.22 KB
Updated: January 07, 2015
Built Using:

CSS Swinging Panel Menu

CSS Swinging Panel Menu
Author: Seth Abbott
Size: 6.41 KB
Created: November 15, 2012
Built Using: HTML / CSS

YouTube Menu Effect

YouTube Menu Effect
Size: 71.1 KB
Created: March 21, 2015
Built Using: HTML / CSS / jQuery (Javascript)

Custom select menu

Custom select menu
Size: 35.6 KB
Updated: October 04, 2017
Built Using: HTML / CSS / jQuery (Javascript)

Responsive Flat Horizontal Menu

Responsive Flat Horizontal Menu
Size: 36.2 KB
Updated: April 16, 2015
Built Using: HTML / CSS / Javascript

Accordion Menu

Accordion Menu
Author: Benjamin
Size: 45.9 KB
Created: April 18, 2014
Built Using: HTML / LESS / jQuery (Javascript)

Hidden Sidebar Menu

Hidden Sidebar Menu
Created: June 03, 2014
Built Using: HTML / SCSS / jQuery (Javascript)

Filter Menu

Filter Menu
Author: Arjun Amgain
Size: 114 KB
Updated: November 13, 2017
Built Using: HTML / CSS / jQuery (Javascript)

Responsive Menu

Responsive Menu
Author: Sutterlity
Size: 6.03 KB
Created: September 05, 2014
Built Using: HTML / SCSS / jQuery (Javascript)

Pure CSS Hamburger fold-out menu

Pure CSS Hamburger fold-out menu
Author: Erik Terwan
Size: 5.92 KB
Updated: April 17, 2018
Built Using: HTML / CSS

HTML5/CSS3 Horizontal Menu

HTML5/CSS3 Horizontal Menu
Size: 2.82 KB
Created: May 15, 2013
Built Using: HTML5 / CSS3

Overlay Css menu

Overlay Css menu
Author: Thibault D
Size: 4.52 KB
Updated: March 02, 2016
Built Using: HTML / SCSS / jQuery (Javascript)

Responsive Mega Menu

Responsive Mega Menu
Author: Arjun Amgain
Size: 228 KB
Created: August 06, 2015
Built Using: HTML / CSS / jQuery (Javascript)

One Page Navigation CSS Menu

One Page Navigation CSS Menu
Size: 38.5 KB
Updated: February 23, 2016
Built Using: HTML / CSS

Side Sliding Menu CSS

Side Sliding Menu CSS
Author: Eduard L.
Size: 23.6 KB
Updated: March 10, 2015
Built Using:

CSS3/Javascript Pure Dropdown Menu

CSS3/Javascript Pure Dropdown Menu
Author: Pedro Nauck
Size: 12.8 KB
Updated: September 01, 2013
Built Using: HTML / SCSS / Javascript

CSS Gooey Menu (Version 4)

CSS Gooey Menu (Version 4)
Author: Lucas Bebber
Size: 7.35 KB
Created: January 26, 2015
Built Using: HTML / SCSS

CSS Drop-Down Menu Transitions

CSS Drop-Down Menu Transitions
Author: Shaw
Size: 15.8 KB
Updated: December 06, 2017
Built Using: HTML / LESS

Animated radial / circular menu

Animated radial / circular menu
Size: 4.86 KB
Updated: April 17, 2014
Built Using: HTML / CSS / Javascript

Off canvas menu

Off canvas menu
Author: Mark Murray
Size: 6.58 KB
Created: November 28, 2014
Built Using: HTML / SCSS / jQuery (Javascript)

CSS3 Responsive Navigation Menu

CSS3 Responsive Navigation Menu
Updated: August 27, 2013
Built Using: HTML / SCSS

Bootstrap Mega menu with CSS

Bootstrap Mega menu with CSS
Author: Redfrost
Size: 9.85 KB
Created: July 01, 2013
Built Using: HTML / CSS / Javascript

Colourful Flower Popup Menu

Colourful Flower Popup Menu
Size: 0.15 KB
Updated: May 24, 2017
Built Using: HTML / CSS

Pull Menu - Menu Interaction Concept_files

Pull Menu - Menu Interaction Concept_files
Author: Fabrizio
Size: 13.6 KB
Updated: December 24, 2014
Built Using: HTML / SCSS / jQuery (Javascript)

Touch device jelly menu concept

Touch device jelly menu concept
Size: 25.6 KB
Updated: January 10, 2014
Built Using: HTML / CSS / Javascript

Full screen burger menu

Full screen burger menu
Size: 5.41 KB
Updated: February 09, 2017
Built Using: HTML / SCSS / jQuery (Javascript)

CSS Gooey Menu (Version 2)

CSS Gooey Menu (Version 2)
Author: Lucas Bebber
Size: 8.51 KB
Created: January 26, 2015
Built Using: HTML / SCSS

CSS Gooey Menu (Version 3)

CSS Gooey Menu (Version 3)
Author: Lucas Bebber
Size: 7.35 KB
Created: January 26, 2015
Built Using: HTML / SCSS

Responsive and Mega menu

Responsive and Mega menu
Author: Arjun Amgain
Size: 32.6 KB
Updated: November 13, 2017
Built Using: HTML / CSS / jQuery (Javascript)

Animated Menu

Animated Menu
Author: Una Kravets
Size: 3.54 KB
Created: January 31, 2014
Built Using: HTML / SCSS / jQuery (Javascript)

Menu Toggle button with flat menu

Menu Toggle button with flat menu
Size: 5.06 KB
Updated: June 10, 2015
Built Using: HTML / CSS / Javascript

Gooey Menu

Gooey Menu
Author: Lucas Bebber
Size: 7.84 KB
Updated: October 22, 2015
Built Using: HTML / SCSS

Sticky menu on scroll

Sticky menu on scroll
Author: Mark Senff
Size: 9.47 KB
Updated: January 26, 2015
Built Using: HTML / CSS / jQuery (Javascript)

Hamburger Menu - HTML, CSS & jQuery

Hamburger Menu - HTML, CSS & jQuery
Author: Glenn Smith
Size: 4.03 KB
Updated: July 16, 2017
Built Using: HTML / CSS / jQuery (Javascript)

Simple Pure CSS Drop Down Menu

Simple Pure CSS Drop Down Menu
Author: Phil Hoyt
Size: 6.31 KB
Updated: February 06, 2014
Built Using: HTML / CSS

iOS style sliding menu

iOS style sliding menu
Size: 16.8 KB
Created: July 12, 2013
Built Using: HTML / SCSS / jQuery (Javascript)

Bootstrap dropdown hover menu

Bootstrap dropdown hover menu
Author: Betul
Size: 6.54 KB
Updated: September 18, 2016
Built Using: HTML / CSS / jQuery (Javascript)

Simple, CSS only, responsive menu

Simple, CSS only, responsive menu
Author: John Urbank
Size: 7.13 KB
Updated: July 17, 2013
Built Using: HTML / CSS

Zigzag dropdown menu concept

Zigzag dropdown menu concept
Author: Catalin Rosu
Size: 4.62 KB
Created: September 02, 2013
Built Using: HTML / CSS

Dropdown Menus

Dropdown Menus
Author: Kevin
Size: 6.24 KB
Updated: April 29, 2014
Built Using: HTML / SCSS

Simple Pure CSS Dropdown Menu

Simple Pure CSS Dropdown Menu
Updated: June 04, 2016
Built Using: HTML / SCSS

Simple PureCss dropdown menu with following subnav

Simple PureCss dropdown menu with following subnav
Size: 4.07 KB
Updated: February 19, 2015
Built Using: HTML / SCSS

Pure Css dropdown menu

Pure Css dropdown menu
Size: 4.76 KB
Updated: May 22, 2018
Built Using: HTML / SCSS

Cool Dropdown Menu Effects Pure Css

Cool Dropdown Menu Effects Pure Css
Size: 21.1 KB
Updated: August 23, 2016
Built Using: HTML / SCSS

Recursive Hover Nav ( Only CSS )

Recursive Hover Nav ( Only CSS )
Author: Sean_codes
Size: 7.43 KB
Updated: September 18, 2018
Built Using: HTML / CSS / Javascript

Fancy Menu #CodePenChallenge

Fancy Menu #CodePenChallenge
Size: 7.62 KB
Updated: July 11, 2018
Built Using: HTML / SCSS

Efficient animated dropdown menu

Efficient animated dropdown menu
Author: Adam Kuhn
Size: 20.3 KB
Updated: June 27, 2018
Built Using: HTML / SCSS

Menu with awesome hover dropdown effect

Menu with awesome hover dropdown effect
Size: 192 KB
Created: June 28, 2018
Built Using: HTML / SCSS

Fast loading SASS based interactive menu

Fast loading SASS based interactive menu
Author: Jenning
Size: 6.24 KB
Updated: November 27, 2018
Built Using: HTML / SASS

Less based gradient menu

Less based gradient menu
Size: 6.68 KB
Updated: July 03, 2018
Built Using: HTML / LESS

Simple fast loading menu with unique look

Simple fast loading menu with unique look
Size: 4.59 KB
Created: June 29, 2018
Built Using: HTML / SASS

Menu in columns

Menu in columns
Updated: March 12, 2013
Built Using: HTML / CSS

Simple hover event navigation experience

Simple hover event navigation experience
Updated: May 19, 2014
Built Using: HTML / CSS / jQuery (Javascript)

Menu Animated Dropdown and Icon

Menu Animated Dropdown and Icon
Size: 4.73 KB
Updated: April 20, 2016
Built Using: HTML / CSS / Javascript

Admin Menu

Admin Menu
Author: Sazzad
Size: 11.5 KB
Created: May 07, 2015
Built Using: HTML / LESS / jQuery (Javascript)

Responsive nav with hamburger animation

Responsive nav with hamburger animation
Author: Josh Shor
Size: 3.96 KB
Created: June 09, 2016
Built Using: HTML / SCSS / jQuery (Javascript)

Animated CSS Menu Icon

Animated CSS Menu Icon
Author: Andrew
Size: 2.46 KB
Updated: November 08, 2016
Built Using: HTML / SCSS / jQuery (Javascript)

Fluid menu with transparent icons

Fluid menu with transparent icons
Size: 7.09 KB
Updated: June 03, 2013
Built Using: HTML / CSS

Pure CSS Responsive Nav

Pure CSS Responsive Nav
Author: Kevin Dee
Size: 4.14 KB
Created: October 13, 2016
Built Using: HTML / CSS

Header with nav and hero section

Header with nav and hero section
Size: 4.22 KB
Updated: July 03, 2018
Built Using: HTML / CSS / jQuery (Javascript)
Tags:,

Add a Comment

Your email address will not be published. Required fields are marked *

Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...

ABOUT CODINGACE

My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start codingace.com is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib

CEO: codingace.com

Request a Quote