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

Table of Contents

  1. Mega Menu

Related Articles

  1. CSS Accordion Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Horizontal Menus
  7. CSS Fullscreen Menus
  8. CSS Sliding Menus
  9. CSS Toggle Menus
  10. CSS Off-Canvas Menus
  11. Bootstrap Menus

Author

  • G Rohit

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

Made with

  • HTML / CSS

About a code

Circle Links

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

Responsive: no

Dependencies: -

Author

  • Cassandra

Made with

  • HTML / CSS

About a code

CSS Full-Page Navigation

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

Responsive: yes

Dependencies: -

Author

  • Cassandra

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

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

Made with

  • HTML / CSS (SCSS)

About a code

Full-Page Navigation

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

Responsive: yes

Dependencies: -

Author

  • Alex Hart

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

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

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

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

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

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

Made with

  • HTML / CSS (SCSS)

About a code

Menu Hover Underline

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

Responsive: yes

Dependencies: -

Author

  • Kyle Lavery

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Apple TV Menu Interface

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Deren

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

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

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

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

Made with

  • HTML / CSS

About a code

Navbar Interaction

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

Responsive: no

Dependencies: -

Author

  • Garet McKinley

Made with

  • HTML / CSS

About a code

Pure CSS Dropdown Menu

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

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

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

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

Made with

  • HTML / CSS

About a code

Menu Bar CSS

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

Responsive: no

Dependencies: -

Author

  • Alberto León

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

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

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

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS

About the code

CSS Menu Feat. Emoji

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

Responsive: yes

Dependencies: -

Author

  • ycw

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

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

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

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

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: -

Demo image: CSS-Only Nested Dropdown Navigation (ARIA)

Author

  • Gabrielle Wee

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
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
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: Simple accordion menu with HTML, CSS and JavaScript
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
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

Demo image: Fullscreen Menu Flexbox Style

Author

  • Marcus Hall

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.

Demo image: Dropdown Menu Animation

Author

  • Dany Santos

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Dropdown Menu Animation

Nice dropdown menu with animation.

Demo image: Mobile Navigation Animation

Author

  • Karlo Videk

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

Demo image: SVG UI Navigation Concept

Author

  • Alex Permyakov

Made with

  • HTML
  • CSS
  • JavaScript

About the code

SVG UI Navigation Concept

Just SVG & CSS3 animations, without any animation libraries.

Demo image: Dropdown Menu

Author

  • Kyle Lavery

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Dropdown menu with little jQuery.

Demo image: Dropdown

Author

  • Ariana Lynn

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Dropdown

Pretty dropdown menu.

Demo image: SVG Gooey Hover Menu Concept

Author

  • Michael Leonard

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.

Demo image: Sidebar Navigation

Author

  • Daniel

Made with

  • HTML
  • CSS/SCSS (font-awesome.css)
  • JavaScript (jquery.js)

About the code

Sidebar Navigation

Sidebar navigation with tooltips.

Demo image: Fullscreen Navigation

Author

  • Rob McFadzean

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
Demo Image: Header Navigation Menu

Header Navigation Menu

Header navigation menu with HTML, CSS and jQuery.
Made by Kyle Lavery
February 4, 2016

Demo image: Menu Fullscreen CSS

Author

  • Felipe Espinoza

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Menu Fullscreen

Menu fullscreen CSS.

Demo Image: Fullscreen Flexbox Overlay Navigation
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

Demo image: Details Info & Navigation

Author

  • Mohan Khadka

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Details Info & Navigation

Navigation with jQuery, CSS and HTML.

Demo Image: CSS3 + jQuery Fullscreen Menu
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

Demo image: Full Screen Navigation Overlay

Author

  • Tania

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.

Demo image: Circular Material Menu

Author

  • Simon Gooder

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Circular Material Menu

Unusual circular menu.

Demo Image: Semicircular Gooey 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
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
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
Demo Image: Fullscreen Navigation

Fullscreen Navigation

CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/
Made by Marcus Bizal
September 3, 2015

Demo image: Frosty Nav Toggle Effect

Author

  • Graham Wilsdon

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

Demo image: Gooey Mobile Navigation

Author

  • BjurhagerStudios

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.

Demo image: Fullscreen Navigation

Author

  • Marcus Bizal

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Fullscreen Navigation

Fullscreen navigation with HTML, CSS and JS.

Demo Image: Colourful Navigation
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
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

Demo image: Fullscreen Menu

Author

  • Jannik Baranczyk

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

About the code

Fullscreen Menu

Simple fullscreen menu.

Demo Image: Explosive 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

Demo image: Sass Off Canvas Nav

Author

  • Tyler Fowle

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

Demo image: CSS Dropdown Menu

Author

  • Rlski

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
Demo Image: Fullscreen Menu

Fullscreen Menu

HTML, CSS and jQuery fullscreen menu.
Made by Paul van Oijen
March 6, 2015

Demo image: Mobile Menu

Author

  • Virgil Pana

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Mobile Menu

HTML, CSS and jQuery effect for mobile menu.

Demo image: Accessible Fullscreen Overlay Menu

Author

  • RaziTazi

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.

Demo image: Quick And Easy Fullscreen Menu

Author

  • Luigi Mannoni

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.

Demo image: Full Page Off-Canvas Navigation

Author

  • Caleb Varoga

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

Demo image: A Simple Dropdown Menu

Author

  • Mike Rojas

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
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
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
Demo Image: CSS3 Funny Side Menu

CSS3 Funny Side Menu

A funny CSS3 menu.
Made by Wagner Moschini
September 1, 2014

Demo image: Flat Horizontal Navigation

Author

  • Andy Tran

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

Demo image: Fullscreen Menu

Author

  • Gerhard Bliedung

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Fullscreen Menu

Fullscreen hamburger menu.

Demo image: Off-Canvas Menu Effects

Author

  • Mary Lou

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.

Demo image: Radial Menu

Author

  • Carlos

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Radial Menu

Animated radial menu.

Demo Image: Toggle Menu
Demo Image: Toggle Menu

Toggle Menu

Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014

Demo image: Pure CSS Transition Effects For Off-Canvas Views

Author

  • Thomas Wilthil

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

Demo image: CSS Off Canvas Menu

Author

  • Nicholas M. Smith

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

Demo image: Dropdown Menu

Author

  • Eric Sadowski

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.

Demo image: Circular Navigation Popout

Author

  • Niels Van Limberghen

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
Demo Image: Animated Menu

Animated Menu

A simple fullscreen menu.
Made by Una Kravets
January 31, 2014

Demo image: Dropdown Menu UI

Author

  • Jeplaa

Made with

  • HTML
  • CSS

About the code

Dropdown Menu UI

Pure CSS dropdown menu.

Demo image: Touch Device Jelly Menu Concept

Author

  • LegoMushroom

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 using jQuery and CSS3
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

Demo image: Circular Links Menu

Author

  • Rachel Smith

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Circular Links Menu

Responsive circular links menu.

Author

  • Carl Rosell

Made with

  • HTML / CSS (SCSS)

About the code

Horizontal Menu

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Bounce Mobile Menu

Author

  • Matt Hoiland

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Bounce Mobile Menu

Menu animation with HTML, CSS and jQuery.

Demo image: Circular Navigation With CSS

Author

  • Sara Soueidan

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.

Demo image: Flexbox Off Canvas Menu

Author

  • Oliver Knoblich

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Flexbox Off Canvas Menu

Lightweight, simple, easy to use.

Demo image: Dropdown Menu

Author

  • Lauren

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.

Demo image: Off Canvas Menu with Animated Links

Author

  • thecodeplayer

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

Demo image: Mega Dropdown

Author

  • codyhouse.co

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.

Demo image: Responsive Mega Menu

Author

  • Droidadda Inc

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu for mobile view.

Demo image: Responsive Mega Menu

Author

  • Kalpesh Singh

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu with flexbox.

Demo image: Sexy Flexy Mega Menu

Author

  • Mike Torosian

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

Demo image: Responsive Mega Menu

Author

  • Arjun Amgain

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu with blog, images and drop down.

Demo image: Mega Menu Dropdowns with Foundation 5

Author

  • SitePoint

Made with

  • HTML
  • CSS/SCSS (foundation.css)
  • JavaScript (jquery.js, foundation.js)

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.