Collection of free HTML and CSS navigation menu code examples. Update of April 2019 collection. 25 new items.

Table of Contents

Related Articles

Author G Rohit

May 1, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Text Fill on Hover Filling the text with a different color on hover - a creative text effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Dan Benmore

April 9, 2020 Links demo and code Made with HTML / CSS About a code Circle Links Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Cassandra

January 20, 2020 Links demo and code Made with HTML / CSS About a code CSS Full-Page Navigation Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Cassandra

January 20, 2020 Links demo and code Made with HTML / CSS About a code Pure CSS Single Page Application Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css

Author Jhey

January 20, 2020 Links demo and code Made with HTML (Pug) / CSS (Stylus) About a code Randomly Generated CSS Blobby Nav A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter , and SVG filter. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Ryan Mulligan

January 18, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Full-Page Navigation Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Alex Hart

January 16, 2020 Links demo and code Made with HTML / CSS About a code Pure CSS Full Page Nav Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari Responsive: yes Dependencies: -

Author Takane Ichinose

January 14, 2020 Links demo and code Made with HTML / CSS About a code Full Page Nav A concept design of full-page navigation, full of typography, and using icons as large images. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Cyd Stumpel

December 29, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Fold Out Mobile Menu CSS only fold out mobile menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author alphardex

December 24, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Menu Hover Fill Text Menu hover fill text ( color + background-clip ). Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Mark

December 9, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Drop Down Menu Smooth drop down menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Swarup Kumar Kuila

November 13, 2019 Links demo and code Made with HTML / CSS About a code Menu with Awesome Hover Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css

Author alphardex

October 30, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Menu Hover Underline Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Kyle Lavery

October 11, 2019 Links demo and code Made with HTML (Pug) / CSS (SCSS) About a code Apple TV Menu Interface Compatible browsers: Chrome, Edge, Opera, Safari Responsive: no Dependencies: -

Author Deren

August 15, 2019 Links demo and code Made with HTML (Pug) / CSS (SCSS) About a code CSS Strange Nav Made a strange navigation. CSS only. Let's Click! Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Cassidy Williams

August 13, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Navigation with Sub-Navigation Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Ryan Mulligan

August 13, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code 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. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Ludmila Tretyakova

August 13, 2019 Links demo and code Made with HTML / CSS About a code Navbar with Pure CSS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: font-awesome.css

Author Himalaya Singh

August 4, 2019 Links demo and code Made with HTML / CSS About a code Navbar Interaction Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Garet McKinley

August 1, 2019 Links demo and code Made with HTML / CSS About a code Pure CSS Dropdown Menu Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Mikael Ainalem

June 13, 2019 Links demo and code Made with HTML / CSS About a code The Circular Menu Using border-radius and clipping paths to create a circular fan like menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Amli

June 5, 2019 Links demo and code Made with HTML / CSS About a code Off Canvas Menu Pure CSS Off canvas menu pure CSS by using only CSS. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author David

May 26, 2019 Links demo and code Made with HTML / CSS About a code Menu Bar CSS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Alberto León

May 6, 2019 Links demo and code Made with HTML / CSS About a code Vertical Dark Menu with CSS Simple vertical dark menu with CSS and icons. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: font-awesome.css

Author Mikael Ainalem

April 24, 2019 Links demo and code Made with HTML / CSS About a code 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. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Andrej Sharapov

March 22, 2019 Links demo and code Made with HTML (Pug) / CSS (SCSS) About the code Off-Canvas Menu Pure CSS off-canvas menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Bennett Feely

March 12, 2019 Links demo and code Made with HTML (Slim) / CSS (SCSS) / JS About the code Moving Underline Nav Menu Compatible browsers: Chrome, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Animated Creativity

March 10, 2019 Links demo and code Made with HTML / CSS 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: -

Author Scott Kennedy

March 5, 2019 Links demo and code HTML / CSS 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: -

Author seto89

March 4, 2019 Links demo and code Made with HTML / CSS 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: -

Author Erin McKinney

February 7, 2019 Links demo and code Made with HTML / CSS About the code Circle Menu nice pure CSS circle menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css

Author tris timb

February 7, 2019 Links demo and code Made with HTML / CSS (SCSS) About the code Position Sticky Subnav Sticky subnavigation in pure CSS. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author steven

December 18, 2018 Links demo and code Made with HTML / CSS About the code Drop Down Menu CSS only drop down menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Jouan Marcel

September 5, 2018 Links demo and code Made with HTML / CSS (SCSS) 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: -

Author Chenius

July 30, 2018 Links demo and code Made with HTML / CSS About the code 3D Navbar 3D navbar in HTML and CSS. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Akhil Sai Ram

July 3, 2018 Links demo and code

design on uplabs Made with HTML / CSS About the code Just Another Menu Pure CSS floating menu animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Jhey

July 1, 2018 Links demo and code Made with HTML / CSS (Stylus) About the code Pure CSS Menu Pure CSS menu drawer with off-click. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Piotr Galor

June 26, 2018 Links demo and code Made with HTML / CSS About the code CSS Menu Feat. Emoji Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author ycw

June 25, 2018 Links demo and code Made with HTML / CSS About the code The Menu Table contents style menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author 0guzhan

June 10, 2018 Links demo and code Made with HTML / CSS About the code Circle Menu Pure CSS circle menu. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css

Author Mehmet Burak Erman

June 3, 2018 Links demo and code Made with HTML (Pug) / CSS (Stylus) About the code Perspective Menus CSS only perspective menus. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Comehope

May 15, 2018 Links demo and code

screencast on scrimba Made with HTML / CSS About the code Menu Effect Reverse text color menu effects. Compatible browsers: Chrome, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Stas Melnikov

March 5, 2018 Links demo and code Made with HTML / CSS 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: -

Author Gabrielle Wee

May 15, 2017 Links demo and code Made with HTML/Haml

CSS/SCSS About the code CSS-Only Nested Dropdown Navigation CSS only nested dropdown navigation with ARIA.

Demo Image: Full Page Off-Canvas Navigation

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.

Made by Caleb Varoga

June 17, 2016

Demo Image: Simple Radial Menu

Simple Radial Menu

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

Made by Nikolay Talanov

June 13, 2016

Demo Image: Accordion Menu

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.

Made by JuliaRietveld

June 8, 2016

Demo Image: Mobile Filter Menu

Mobile Filter Menu

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

Made by Arjun Amgain

June 1, 2016

Author Marcus Hall

May 19, 2016 Links demo and code Made with HTML/Slim

CSS/SCSS

JavaScript (jquery.js) About the code Fullscreen Menu Flexbox Style Chrome and Firefox good... IE bad, no transition support for flex property.

Author Dany Santos

April 30, 2016 Links demo and code Made with HTML

CSS

JavaScript About the code Dropdown Menu Animation Nice dropdown menu with animation.

Author Karlo Videk

April 22, 2016 Links demo and code Made with HTML

CSS

JavaScript About the code Mobile Navigation Animation Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking...

Author Alex Permyakov

March 31, 2016 Links demo and code Made with HTML

CSS

JavaScript About the code SVG UI Navigation Concept Just SVG & CSS3 animations, without any animation libraries.

Author Kyle Lavery

March 28, 2016 Links demo and code Made with HTML/Pug

CSS/SCSS

JavaScript (jquery.js) About the code Dropdown Menu Dropdown menu with little jQuery.

Author Ariana Lynn

March 18, 2016 Links demo and code Made with HTML

CSS

JavaScript About the code Dropdown Pretty dropdown menu.

Author Michael Leonard

March 4, 2016 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code SVG Gooey Hover Menu Concept Uses SVG path manipulation based on mouse position to 'chase' the user's position.

Author Daniel

February 17, 2016 Links demo and code Made with HTML

CSS/SCSS (font-awesome.css)

JavaScript (jquery.js) About the code Sidebar Navigation Sidebar navigation with tooltips.

Author Rob McFadzean

February 9, 2016 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Fullscreen Navigation Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.

Demo Image: Header Navigation Menu

Header Navigation Menu

Header navigation menu with HTML, CSS and jQuery.

Made by Kyle Lavery

February 4, 2016

Author Felipe Espinoza

February 2, 2016 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Menu Fullscreen Menu fullscreen CSS.

Demo Image: Fullscreen Flexbox Overlay Navigation

Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.

Made by Mirko Zorić

January 8, 2016

Author Mohan Khadka

January 4, 2016 Links demo and code Made with HTML

CSS

JavaScript About the code Details Info & Navigation Navigation with jQuery, CSS and HTML.

Demo Image: CSS3 + jQuery Fullscreen Menu

CSS3 + jQuery Fullscreen Menu

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

Made by Anton Petrov

December 5, 2015

Author Tania

November 21, 2015 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jQuery.js) About the code Full Screen Navigation Overlay An example of a full screen navigation overlay utilizing flexbox.

Author Simon Gooder

October 23, 2015 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Circular Material Menu Unusual circular menu.

Demo Image: Semicircular Gooey Menu

Semicircular Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

Made by Lucas Bebber

October 22, 2015

Demo Image: Sliding Navigation Menu

Sliding Navigation Menu

Sliding navigation menu is hidden by default.

Made by Aleh Isakau

October 4, 2015

Demo Image: Fullscreen Navigation

4 Fullscreen Navigation

4 Fullscreen navigation with HTML, CSS and jQuery.

Made by ari

September 13, 2015

Demo Image: Fullscreen Navigation

Fullscreen Navigation

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

Made by Marcus Bizal

September 3, 2015

Author Graham Wilsdon

July 22, 2015 Links demo and code Made with HTML

CSS

JavaScript About the code Frosty Nav Toggle Effect HTML, CSS and jQuery frosty navigation toggle effect.

Demo Image: Hamburger Icon With Morphing Menu

Hamburger Icon With Morphing Menu

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

Made by Sergio

July 15, 2015

Demo Image: Dropdown Navigation

Dropdown Navigation

Dropdown navigation with HTML, CSS and JavaScript

Made by Ryan Morr

July 7, 2015

Demo Image: Full Screen Navigation Using SVG

Full Screen Navigation Using SVG

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

Made by Anas Ashraf

July 2, 2015

Author BjurhagerStudios

June 29, 2015 Links demo and code Made with HTML

CSS

JavaScript About the code Gooey Mobile Navigation The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.

Author Marcus Bizal

June 25, 2015 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Fullscreen Navigation Fullscreen navigation with HTML, CSS and JS.

Demo Image: Colourful Navigation

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.

Made by Lewi Hussey

June 4, 2015

Demo Image: Simple JS Mobile Navigation

Simple JS Mobile Navigation

Simple JS mobile navigation with HTML and CSS.

Made by Kieran Hunter

May 26, 2015

Author Jannik Baranczyk

May 22, 2015 Links demo and code Made with HTML

CSS/SCSS

JavaScript/Babel (jquery.js) About the code Fullscreen Menu Simple fullscreen menu.

Demo Image: Explosive Menu

Explosive Menu

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

Made by Harris Carney

May 17, 2015

Author Tyler Fowle

April 9, 2015 Links demo and code Made with HTML/Haml

CSS/SCSS

JavaScript (jquery.js) About the code Off Canvas Nav Sass off-canvas navigation.

Demo Image: Solution For Long Drop Down Items

Solution For Long Drop Down Items

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

Made by Larry Geams Parangan

March 13, 2015

Demo Image: Full-Screen Menu Overlay

Full-Screen Menu Overlay

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

Made by Ettrics

March 12, 2015

Author Rlski

March 12, 2015 Links demo and code Made with HTML

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

Demo Image: Fullscreen Menu

Fullscreen Menu

HTML, CSS and jQuery fullscreen menu.

Made by Paul van Oijen

March 6, 2015

Author Virgil Pana

March 1, 2015 Links demo and code Made with HTML

CSS

JavaScript About the code Mobile Menu HTML, CSS and jQuery effect for mobile menu.

Author RaziTazi

February 5, 2015 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code Accessible Fullscreen Overlay Menu A fairly accessible fullscreen overlay menu built with jQuery and CSS.

Author Luigi Mannoni

January 31, 2015 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) 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.

Author Caleb Varoga

January 20, 2015 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) 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.

Demo Image: Offcanvas Sidebar Menu With A Twist

Offcanvas Sidebar Menu With A Twist

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

Made by Devilish Alchemist

January 13, 2015

Demo Image: Off Canvas Menu

Off Canvas Menu

Little off canvas animated menu.

Made by Mark Murray

November 28, 2014

Demo Image: Accordion Drop Down Menu

Accordion Drop Down Menu

HTML, CSS accordion menu with jQuery. No plugins.

Made by Agustin Ortiz

November 18, 2014

Demo Image: Flat Vertical Navigation

Flat Vertical Navigation

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

Made by Andy Tran

November 18, 2014

Author Mike Rojas

November 4, 2014 Links demo and code Made with HTML/Pug

CSS/SCSS About the code A Simple Dropdown Menu Just a simple HTML and CSS dropdown menu.

Demo Image: Material Design Navigation

Material Design Navigation

The page slides to reveal a clean, simple navigation.

Made by Lewi Hussey

October 30, 2014

Demo Image: Triangular Mobile Toggle Navigation

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.

Made by MoKev

October 12, 2014

Demo Image: CSS3 Funny Side Menu

CSS3 Funny Side Menu

A funny CSS3 menu.

Made by Wagner Moschini

September 1, 2014

Author Andy Tran

September 2, 2014 Links demo and code Made with HTML/Haml

CSS/Less

JavaScript (jquery.js) 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.

Demo Image: Flat Vertical Navigation

Flat Vertical Navigation

A simple flat vertical navigation with a simple dropdown menu.

Made by Andy Tran

September 1, 2014

Author Gerhard Bliedung

August 27, 2014 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Fullscreen Menu Fullscreen hamburger menu.

Author Mary Lou

August 16, 2014 Links demo and code Made with HTML

CSS

JavaScript (bounce.js,

snap.svg) About the code Off-Canvas Menu Effects Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Author Carlos

July 30, 2014 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Radial Menu Animated radial menu.

Demo Image: Toggle Menu

Toggle Menu

Toggle menu with HTML, CSS and jQuery.

Made by Yoann

July 16, 2014

Author Thomas Wilthil

July 3, 2014 Links demo and code Made with HTML

CSS 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

Author Nicholas M. Smith

May 15, 2014 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code CSS Off Canvas Menu Another off canvas menu using the checkbox hack to active mobile navigation.

Demo Image: Side Accordion Menu

Side Accordion Menu

HTML, CSS, jQuery sidebar accordion menu.

Made by Benjamin

April 18, 2014

Demo Image: Fixed Flyout/Off-Canvas Navigation

Fixed Flyout/Off-Canvas Navigation

A responsive fixed menu that's always right there.

Made by Colin

April 3, 2014

Author Eric Sadowski

February 20, 2014 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) 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.

Author Niels Van Limberghen

February 6, 2014 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Circular Navigation Popout Full circular animated navigation in CSS. Perfect for mobile. Based on codrops's circular navigation.

Demo Image: Animated Menu

Animated Menu

A simple fullscreen menu.

Made by Una Kravets

January 31, 2014

Author Jeplaa

January 20, 2014 Links demo and code Made with HTML

CSS About the code Dropdown Menu UI Pure CSS dropdown menu.

Author LegoMushroom

January 10, 2014 Links demo and code Made with HTML

CSS

JavaScript About the code Touch Device Jelly Menu Concept Touch device jelly menu concept with HTML, CSS and JavaScript.

Demo Image: Vertical Accordion Menu

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.

Made by thecodeplayer



Author Rachel Smith

October 24, 2013 Links demo and code Made with HTML

CSS

JavaScript About the code Circular Links Menu Responsive circular links menu.

Author Carl Rosell

October 9, 2013 Links demo and code Made with HTML / CSS (SCSS) About the code Horizontal Menu Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: font-awesome.css

Author Matt Hoiland

October 10, 2013 Links demo and code Made with HTML

CSS

JavaScript About the code Bounce Mobile Menu Menu animation with HTML, CSS and jQuery.

Author Sara Soueidan

August 9, 2013 Links tutorial Made with HTML

CSS

JavaScript (classie.js) About the code Circular Navigation With CSS A tutorial on how to create a circular navigation using CSS transforms.

Author Oliver Knoblich

July 23, 2013 Links demo and code Made with HTML/Haml

CSS/SCSS

JavaScript (jquery.js) About the code Flexbox Off Canvas Menu Lightweight, simple, easy to use.

Author Lauren

July 14, 2013 Links demo and code Made with HTML

CSS/LESS

JavaScript (jquery.js) About the code Dropdown Menu This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

Author thecodeplayer Links demo and code Made with HTML

CSS 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.

Mega Menu

Author codyhouse.co Links tutorial

demo Made with HTML

CSS

JavaScript (jquery.js,

jquery.menu-aim.js) About the code Mega Dropdown A responsive and easy to customise mega-dropdown component.

Author Droidadda Inc

August 28, 2017 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code Responsive Mega Menu Responsive mega menu for mobile view.

Author Kalpesh Singh

July 31, 2017 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code Responsive Mega Menu Responsive mega menu with flexbox.

Author Mike Torosian

October 4, 2016 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) 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

Author Arjun Amgain

August 6, 2015 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code Responsive Mega Menu Responsive mega menu with blog, images and drop down.