Post thumbnail: 146 CSS Menu

146 CSS Menu

Collection of free HTML and CSS navigation menu code examples. Update of June 2018 collection. 32 new items.

Table of Contents

  1. Mega Menu

Related Articles

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

Author

  • Ahmad Emran

Made with

  • HTML / CSS

About the code

Awesome Accordion Menu

Awesome accordion menu using only HTML & CSS.

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

Responsive: yes

Dependencies: font-awesome.css

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

Made with

  • 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

  • Francesca Vago

Made with

  • HTML / CSS / JS

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

Author

  • Ibn Al-Khwarizmi

Made with

  • HTML (Pug) / CSS (SCSS) / JS

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

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

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS) / JS

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

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

  • Zealand

Made with

  • HTML / CSS

About the code

Molten Menu

This combines a CSS drop down menu, and the oozing effects of liquid flame.

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

Responsive: no

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

  • Jorge

Made with

  • HTML / CSS / JS

About the code

Jelly Menu

Jelly menu concept in HTML, CSS and JS.

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

Responsive: no

Dependencies: -

Author

  • Jove Angelevski

Made with

  • HTML / CSS (SCSS) / JS

About the code

Navigation Buttons

UI navigation buttons.

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

Responsive: no

Dependencies: font-awesome.css

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

  • Mohamed Ayman

Made with

  • HTML / CSS (SCSS)

About the code

Main Menu

Horizontal menu with dropdown effects in HTML and CSS.

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

Responsive: yes

Dependencies: ionicons.css

Author

  • Ahmed Nasr

Made with

  • HTML / CSS (SCSS)

About the code

Horizontal Dropdown Menu

Pure CSS horizontal dropdown menu with nice transitions and beautiful palette.

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

Responsive: yes

Dependencies: ionicons.css

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

  • Leena Lavanya

Made with

  • HTML / CSS (SCSS) / JS

About the code

Code Menu

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS / JS

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

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

  • Speresunko

Made with

  • HTML / CSS (SCSS) / JS

About the code

Menu

Toggle menu in HTML, CSS and JS.

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

Responsive: no

Dependencies: -

Demo image: Dropdown Menu

Author

  • Veronica

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Custom dropdown menu.

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

Author

  • Rea Newell

Made with

  • HTML / CSS

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

Demo image: Responsive Sidebar/Navbar

Author

  • Ferran Buireu

Made with

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

About the code

Responsive Sidebar/Navbar

Vertical/Horizontal responsive sidebar/navbar.

Demo image: Off-Canvas Navigation w/Page Transitions

Author

  • Kyle Brumm

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (classList.js, smoothscroll.js)

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.

Demo image: Sidebar Template

Author

  • azouaoui mohamed

Made with

  • HTML
  • CSS (bootstrap.css, font-awesome.css)
  • JavaScript (jquery.js, bootstrap.js)

About the code

Sidebar Template

Sidebar template with drop down menu based on Bootstrap.

Demo image: Sidebar Indicators

Author

  • MAHESH AMBURE

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Sidebar Indicators

Sidebar menu with indicators.

Demo image: Circle Navigation

Author

  • Jesús Castro

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jQuery.js, TweenMax.js)

About the code

Circle Navigation

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

Demo image: Submenu Expand

Author

  • Mikael Ainalem

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

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.

Demo image: Morphing Tab Button With List

Author

  • Colin Horn

Made with

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

About the code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

Demo image: Radial/Circular Menu Concept

Author

  • Glenn McComb

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

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.

Demo image: Dropdown Menu

Author

  • Lukasz

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Nice dropdown menu.

Demo Image: Mega Menu CSS
Demo Image: Mega Menu CSS

Mega Menu CSS

Menu in CSS & HTML.
Made by theo sije
June 15, 2017

Demo Image: Fancy Toggle Menu
Demo Image: Fancy Toggle Menu

Fancy Toggle Menu

A fancy toggle menu to edit quickly posts on websites.
Made by Florian Guiffrey
June 14, 2017

Demo Image: NavMenu
Demo GIF: NavMenu

NavMenu

Expandble/collapsable navigation menu.
Made by Mitchell Swaffield
June 12, 2017

Demo image: Fixed Navigation Sidebar

Author

  • Boomer

Made with

  • HTML
  • CSS/Sass (bootstrap.css)
  • JavaScript (jquery.js, bootstrap.js)

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.

Demo image: Fullscreen Menu

Author

  • veronika

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Fullscreen Menu

Fullscreen menu with Flexbox & jQuery.

Demo image: Admin Sidebar

Author

  • Milica

Made with

  • HTML
  • CSS/SCSS (bootstrap.client.css, bootstrap.admin.css, font-awesome.css)
  • JavaScript

About the code

Admin Sidebar

Admin sidebar HTML and CSS menu.

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

Author

  • naymapl

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Dropdown menu with jQuery.

Demo Image: Radial Menu Animation
Demo Image: Radial Menu Animation

Radial Menu Animation

Mobile radial menu animation with HTML, CSS and JavaScript.
Made by Anton Mudrenok
March 30, 2017

Demo Image: Slide Accordion Menu
Demo Image: Slide Accordion Menu

Slide Accordion Menu

Slide accordion menu with HTML, CSS and JavaScript.
Made by Anya Melnyk
January 9, 2017

Demo Image: Ribbon Navigation
Demo Image: Ribbon Navigation

Ribbon Navigation

SVG Ribbon Navigation. Originally built as a quick prototype for some client work. The code could do with being more dynamic.
Made by Steve Gardner
December 15, 2016

Demo Image: Off-canvas Menu Animation With Burger Icon
Demo Image: Off-Canvas Menu Animation With Burger Icon

Off-Canvas Menu Animation With Burger Icon

Side menu animation with burger icon with HTML, CSS and jQuery.
Made by Maxime
November 26, 2016

Demo Image: Angled Menu
Demo Image: Angled Menu

Angled Menu

Angled menu with HTML, CSS and jQuery.
Made by Keith Light
November 25, 2016

Demo Image: Circular Navigation Concept
Demo Image: Circular Navigation Concept

Circular Navigation Concept

A new navigation concept with HTML, CSS and JavaScript.
Made by Benedict
November 24, 2016

Demo Image: Menu Shelf
Demo Image: Menu Shelf

Menu Shelf

HTML, CSS and JavaScript sliding menu.
Made by Alex Coven
October 29, 2016

Demo image: Real Fullscreen Navigation

Author

  • Em Ji Madhu

Made with

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

About the code

Real Fullscreen Navigation

A full viewport responsive navigation.

Demo image: Style Dropdown Menu

Author

  • Rian Ariona

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel

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.

Demo Image: A clean Navigation Slider
Demo Image: A Clean Navigation Slider

A Clean Navigation Slider

This is a very clean navigation with a cool slider.
Made by Roemerdt
August 20, 2016

Demo image: Fullscreen Menu

Author

  • Andrew Peirs

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Fullscreen Menu

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

Demo image: CSS Staggered Animation Dropdown Menu

Author

  • Boomer

Made with

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

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.

Demo Image: Animated Mobile Navigation
Demo Image: Animated Mobile Navigation

Animated Mobile Navigation

Animated mobile navigation created in Javascript using Greensock.
Made by Greg Hovanesyan
July 11, 2016

Demo Image: Simple jQuery Slide Menu
Demo Image: Simple jQuery Slide Menu

Simple jQuery Slide Menu

Very simple jQuery slide menu.
Made by P.S.Blakemore
July 10, 2016

Demo Image: Secret UI Project
Demo Image: Secret UI Project

Secret UI Project

Secret UI Project is prototype mockups created by Anton Aheichanka that has been converted into web version.
Made by Mohan Khadka
July 10, 2016

Demo image: Floating Circular Menu

Author

  • Mahmoud

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Circular Menu

Pretty floating circular menu with HTML, CSS and JS.

Demo Image: Velocity.js Fullscreen Flexbox Overlay Navigation
Demo Image: Velocity.js Fullscreen Flexbox Overlay Navigation

Velocity.js Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation with velocity.js.
Made by Mirko Zorić
June 20, 2016

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.

back to top