Post thumbnail: 212 CSS Menu

212 CSS Menu

Collection of free HTML and CSS menu code examples: accordion, circular, dropdown, fullscreen, horizontal, mega, mobile, off-canvas, sidebar, toggle and sliding. Update of February 2018 collection. 90 new items.

Table of Contents

  1. Accordion Menu
  2. Circular Menu
  3. Dropdown Menu
  4. Fullscreen Menu
  5. Horizontal Menu
  6. Mega Menu
  7. Mobile Menu
  8. Off-Canvas Menu
  9. Sidebar Menu
  10. Toggle Menu
  11. Sliding Menu

Accordion Menu

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: Swanky Pure CSS Drop Down Menu
Demo Image: Swanky Pure CSS Drop Down Menu

Swanky Pure CSS Drop Down Menu

Pure CSS drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Made by Jamie Coulter
April 12, 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: 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: 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: 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: Only CSS3 Dropdown Menu
Demo Image: Only CSS3 Dropdown Menu

Only CSS3 Dropdown Menu

CSS3 dropdown menu with vibrating effects.
Made by Pedro Nauck
September 1, 2013

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

Circular Menu

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

Circular Menu

Rotating circular menu.
Made by Kostadin
June 14, 2017

Demo Image: Rings Navigation Concept
Demo Image: Rings Navigation Concept

Rings Navigation Concept

Links are absolutely positioned on top of each other making several rings.
Made by Bennett Feely
February 15, 2017

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: Circular Menu Navigation

Author

  • Kapilraj Parameswararajah

Made with

  • HTML
  • CSS

About the code

Circular Menu Navigation

Animated HTML and CSS circular menu.

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: 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: Colourful Flower Popup Menu
Demo Image: Colourful Flower Popup Menu

Colourful Flower Popup Menu

Mobile inspired flower popup menu. Feel free to use it however you like.
Made by Jordan LaChance
March 22, 2016

Demo image: Circular NavBar

Author

  • sanjeev yadav

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Circular NavBar

Inspired from google material design and circles.

Demo Image: Pure CSS 3D Radial Menu
Demo Image: Pure CSS 3D Radial Menu

Pure CSS 3D Radial Menu

Super radial menu hyper action!
Made by Jamie Coulter
November 16, 2015

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: Circular Menu, Navigation, Hamburger

Author

  • Shyam Chen

Made with

  • HTML/Pug
  • CSS/Stylus

About the code

Circular Menu

Navigation: hamburger circular menu.

Demo image: Circular Menu

Author

  • Mojtaba Seyedi

Made with

  • HTML
  • CSS

About the code

Circular Menu

Pure CSS circular menu.

Demo Image: Pure CSS Circle Menu
Demo Image: Pure CSS Circle Menu

Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.
Made by Hadar Weiss
June 22, 2015

Demo image: CSS Radial Menu

Author

  • web-tiki

Made with

  • HTML
  • CSS

About the code

CSS Radial Menu

Hover the burger to expand radial menu. Only CSS with transitions and transfroms. The radial menu system is responsive according to the viewport height/width.

Demo image: Circular Menu

Author

  • Andrew Myers

Made with

  • HTML
  • CSS

About the code

Circular Menu

Pure CSS circular menu with hover effect.

Demo image: Circular Gooey Menu

Author

  • Lucas Bebber

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Circular Gooey Menu

Gooey menu with CSS and SVG filters. Version 2.

Demo image: Radial Menu

Author

  • Carlos

Made with

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

About the code

Radial Menu

Animated radial menu.

Demo image: Animated Radial/Circular Menu

Author

  • Creative Punch

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Animated Radial/Circular Menu

Animated radial menu made with CSS3 and JavaScript.

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: Pure CSS Spin-Out Menu

Author

  • Billy Crist

Made with

  • HTML
  • CSS/SCSS

About the code

Pure CSS Spin-Out Menu

Hover the menu and all of it’s items flare out!

Demo image: Circular Links Menu

Author

  • Rachel Smith

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Circular Links Menu

Responsive circular links menu.

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

Author

  • Veronica

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Custom dropdown menu.

Demo image: Recursive Hover Nav

Author

  • Sean Codes

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Recursive Hover Nav

Only CSS recursive hover navigation.

Demo image: Dropdown Menu

Author

  • Lukasz

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Nice dropdown 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: 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: 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: Dropdown Menu Effects

Author

  • Ruslan Pivovarov

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Dropdown Menu Effects

Cool dropdown menu effects pure CSS, but pretty useless in real world.

Demo Image: Simple Pure CSS Dropdown Menu
Demo Image: Simple Pure CSS Dropdown Menu

Simple Pure CSS Dropdown Menu

Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
Made by Connor Brassington
June 4, 2016

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

Dropdown Navigation

Dropdown navigation with HTML, CSS and JavaScript
Made by Ryan Morr
July 7, 2015

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: 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: Simple Pure Css Dropdown Menu With Following Subnav
Demo Image: Simple Pure Css Dropdown Menu With Following Subnav

Simple Pure Css Dropdown Menu With Following Subnav

Menu with dropdown made only in CSS, with a line that follow the hover on the line.
Made by Robert Borghesi
February 19, 2015

Demo image: Dropdown Menu

Author

  • Sathish kumar

Made with

  • HTML
  • CSS/SCSS

About the code

Dropdown Menu

Pure CSS dropdown menu.

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

Author

  • Kevin

Made with

  • HTML
  • CSS/SCSS

About the code

Dropdown Menu

Animated CSS dropdown menu.

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

Author

  • Jeplaa

Made with

  • HTML
  • CSS

About the code

Dropdown Menu UI

Pure CSS dropdown menu.

Demo image: Zigzag Dropdown Menu Concept

Author

  • Catalin Rosu

Made with

  • HTML
  • CSS

About the code

Zigzag Dropdown Menu Concept

This is just another dropdown menu concept.

Demo image: Simple, CSS Only, Responsive Menu

Author

  • John Urbank

Made with

  • HTML
  • CSS

About the code

Simple, CSS Only, Responsive Menu

Simple dropdown menu.

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.

Fullscreen Menu

Demo image: Simple and Responsive Menu

Author

  • Erin E. Sullivan

Made with

  • HTML
  • CSS

About the code

Simple And Responsive Menu

A simple and responsive menu. HTML5 and CSS3 only. No jQuery. IE11 friendly.

Demo image: Full Width Menu

Author

  • Brandon Ward

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Full Width Menu

Full width menu & SVG animation.

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: Another Menu Concept
Demo GIF: Another Menu Concept

Another Menu Concept

One more for the collection, this one includes a custom menu icon and great animation.
Made by Rune Sejer Hoffmann
June 6, 2017

Demo image: Fullscreen Menu

Author

  • veronika

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Fullscreen Menu

Fullscreen menu with Flexbox & jQuery.

Demo Image: Material Design Menu
Demo Image: Material Design Menu

Material Design Menu

Material design inspired ‘growing’ menu? Not sure what to call it to be honest. No jQuery used.
Made by Arjan Jassal
November 14, 2016

Demo Image: Burger Menu. Mobile Optimized. Modal
Demo Image: Burger Menu. Mobile Optimized. Modal

Burger Menu. Mobile Optimized. Modal

Modal, mobile optimized burger menu with HTML, CSS and JavaScript.
Made by Christopher Mally
November 1, 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: 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: 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: 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: 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: 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 Menu

Author

  • Akshay Nair

Made with

  • HTML
  • CSS/SCSS

About the code

Fullscreen Menu

Pure CSS fullscreen menu.

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

Pure CSS Fullscreen Navigation Menu

HTML and CSS fullscreen navigation menu.
Made by Brenden Palmer
December 29, 2015

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: 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: Pure CSS3 Menu FullScreen

Author

  • Paulo César da Conceição Ferreira Junior

Made with

  • HTML
  • CSS

About the code

Pure CSS3 Menu FullScreen

A Fullscreen Menu with transitions and effects with pure CSS3. No Jquery or similars.

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

Author

  • Jannik Baranczyk

Made with

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

About the code

Fullscreen Menu

Simple fullscreen menu.

Demo image: Fullscreen Navigation Menu

Author

  • Brenden Palmer

Made with

  • HTML
  • CSS/Less

About the code

Fullscreen Navigation Menu

Pure CSS fullscreen navigation 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: Fullscreen Nav

Author

  • Matthew Blode

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Fullscreen Nav

Burger minimal, fullscreen navigation.

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

Fullscreen Menu

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

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

Author

  • Gerhard Bliedung

Made with

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

About the code

Fullscreen Menu

Fullscreen hamburger menu.

Demo Image: Animated Menu
Demo Image: Animated Menu

Animated Menu

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

Horizontal Menu

Demo image: Menu Hover Line Effect

Author

  • Mehmet Burak Erman

Made with

  • HTML
  • CSS/SCSS

About the code

Menu Hover Line Effect

Nice and simple menu hover line effect.

Demo image: CSS Menu Concept

Author

  • Charlie Marcotte

Made with

  • HTML/Pug
  • CSS/Sass

About the code

CSS Menu Concept

CSS menu concept with clip-path

Demo image: Strikethrough Hover Effect

Author

  • Artyom

Made with

  • HTML
  • CSS/SCSS

About the code

Strikethrough Hover Effect

Hover effect for links (horizontal menu). Use only one pseudo-element on link.

Demo Image: Lavalamp CSS Menu
Demo Image: Lavalamp CSS Menu

Lavalamp CSS Menu

Lavalamp HTML ans CSS menu.
Made by Irvine Potok
February 22, 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: 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: Icon Navigation
Demo Image: Horizontal Icon Navigation

Horizontal Icon Navigation

Simple SVG icon navigation with shadows using flex-box.
Made by Marco Biedermann
June 16, 2016

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: Slide-Menu #2
Demo Image: Slide-Menu #2

Slide-Menu #2

This is a CSS-only slide menu.
Made by Aaron Benjamin
April 30, 2015

Demo Image: Beautiful Navigation Hover Effects
Demo Image: Beautiful Navigation Hover Effects

Beautiful Navigation Hover Effects

Beautiful hover effects for horizontal menu.
Made by Dominik Biedebach
April 3, 2015

Demo Image: Horizontal Skewed Menu
Demo Image: Horizontal Skewed Menu

Horizontal Skewed Menu

Using CSS3 properties to make a no-mainstream skewed men.
Made by Claudio Holanda
March 10, 2015

Demo Image: Simple Menu Navigation
Demo Image: Simple Menu Navigation

Simple Menu Navigation

Just a simple menu with HTML and CSS.
Made by Karim Balaa
January 11, 2015

Demo Image: Transparent Fading Navigation Bar
Demo Image: Transparent Fading Navigation Bar

Transparent Fading Navigation Bar

Transparent fading navigation bar with mask image.
Made by MrPirrera
August 23, 2014

Demo Image: CSS3 Responsive Menu Effect
Demo Image: CSS3 Responsive Menu Effect

CSS3 Responsive Menu Effect

Responsive slide menu effect.
Made by Bogdan Blinnikov
April 15, 2014

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.

Mobile Menu

Demo image: Simple Mobile Menu

Author

  • Leonardo Crecente

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Simple Mobile Menu

Fully responsive menu using Bootstrap 3.x, FontAwesome, CSS flexbox and CSS BEM syntax.

Demo image: Mobile Menu Animation

Author

  • Stas Melnikov

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Mobile Menu Animation

Works better on mobile devices. The hamburger button is comfortably available for a lefty and righty.

Demo image: Mobile Menu Concept

Author

  • Kyle Lavery

Made with

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

About the code

Mobile Menu Concept

A concept inspired by Daniel Korpai's Dribbble post.

Demo image: Magical Mobile Mega Menu

Author

  • tiffany choong

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel

About the code

Magical Mobile Mega Menu

Mega menu for mobile with little JavaScript.

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: Animated Accessible Navigation

Author

  • Max Böck

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel

About the code

Animated Accessible Navigation

Accessible, progressive-enhanced navigation menu with a circular animated background.

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: Menu With Scroll & Hover Effects
Demo Image: Menu With Scroll & Hover Effects

Menu With Scroll & Hover Effects

Inspired by an app concept created by Sergey Valiukh for the Tubik Studio.
Made by Ivan Bogachev
February 24, 2017

Demo Image: Pure CSS Navigation Simple & Easy
Demo Image: Pure CSS Navigation Simple & Easy

Pure CSS Navigation Simple & Easy

Simple & easy HTML/CSS navigation.
Made by Ravi Dhiman
December 11, 2016

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

Author

  • Ian Turner

Made with

  • HTML
  • CSS
  • JavaScript

About the code

App Navigation

Concept for mobile app navigation.

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: 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: 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: 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: 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: 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: Bounce Mobile Menu

Author

  • Matt Hoiland

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Bounce Mobile Menu

Menu animation with HTML, CSS and jQuery.

Off-Canvas Menu

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: Off-Canvas Menu

Author

  • Envato Tuts+

Made with

  • HTML
  • CSS
  • JavaScript/Babel

About the code

Off-Canvas Menu

Off-canvas menu with CSS and a touch of JavaScript.

Demo image: Hidden Side Menu

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS

About the code

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

Demo image: Pure CSS Slide Out Menu

Author

  • James Zedd

Made with

  • HTML
  • CSS

About the code

Pure CSS Slide Out Menu

A slide out menu that does not require JS to function properly - all handled by CSS and 100% functional.

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: CSS3 Off-Canvas Panel With Menu
Demo Image: CSS3 Off-Canvas Panel With Menu

CSS3 Off-Canvas Panel With Menu

A CSS3 side panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.
Made by Darren Huskie
August 17, 2016

Demo image: Off-Canvas Menu

Author

  • Carlos Tur

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Off-Canvas Menu

From the course "Mastering CSS Transitions, Transforms & Animations" by CodyHouse.

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: 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: 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: Off Canvas Navigation

Author

  • Adam Carignan

Made with

  • HTML
  • CSS/SCSS

About the code

Off Canvas Navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Demo image: Pure CSS Off-Canvas Menu With Flexbox

Author

  • Zoe Gillenwater

Made with

  • HTML
  • CSS/SCSS

About the code

Pure CSS Off-Canvas Menu With Flexbox

This example uses flexbox to control the layout so that when the menu becomes visible, the content area can resize to fit the remaining width in the viewport, instead of overflowing the viewport and getting cut off on the right side, as happens with most off-canvas menus. The menu's visibility is toggled without JavaScript using the checkbox hack.

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: Pure CSS Off-Screen Navigation Menu
Demo Image: Pure CSS Off-Screen Navigation Menu

Pure CSS Off-Screen Navigation Menu

Finally, an off-screen menu that doesn’t require a bunch of Javascript to work. This concept relies on the :checked pseudo-selector as well as the general sibling ~ selector, so it has decent browser support.
Made by SitePoint
August 5, 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: 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: 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: iOS Style Sliding Menu
Demo Image: iOS Style Sliding Menu

iOS Style Sliding Menu

Here’s an easy way to create an iOS style, side sliding menu.
Made by Jason Howmans
July 12, 2013

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.

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: 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: 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: Mirror Like Nav

Author

  • Sean Codes

Made with

  • HTML/Pug
  • CSS
  • JavaScript

About the code

Mirror Like Nav

CSS only mirror like nav.

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

Author

  • Milica

Made with

  • HTML
  • CSS/SCSS

About the code

Sidebar

CSS navbar & sidebar.

Demo image: Sidebar Menu

Author

  • Shawn Reisner

Made with

  • HTML
  • CSS/SCSS

About the code

Sidebar Menu

Purple sidebar menu.

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: Pure CSS Fly In Sidebar Navigation

Author

  • Stephen Scaff

Made with

  • HTML
  • CSS/SCSS

About the code

Pure CSS Fly In Sidebar Navigation

A simple, multi-level sidebar nav. Features pure css "fly in" subnav, that leaves icons of parent nav visible. Nav items will scroll (overflow-y) if needed. Uses transforms and transitions.

Demo image: Sidebar Nav Animation

Author

  • magnificode

Made with

  • HTML
  • CSS/SCSS

About the code

Sidebar Nav Animation

Nothing like a little trendy body pushin.

Demo Image: Fixed Side Drawer Navigation
Demo Image: Fixed Side Drawer Navigation

Fixed Side Drawer Navigation

Fixed side drawer navigation, that expands on hover. (Treehouse inspired).
Made by Vince Brown
April 13, 2015

Demo: Fully Responsive CSS3 Menu
Demo Image: Fully Responsive CSS3 Menu

Fully Responsive CSS3 Menu

A fully responsive menu without any need of JavaScript and using less than 200 lines of functional CSS code.
Made by Claudio Holanda
March 19, 2015

Demo Image: Side Sliding Menu CSS
Demo Image: Side Sliding Menu CSS

Side Sliding Menu CSS

CSS side sliding menu with scroll, no JS were used.
Made by Eduard L.
March 10, 2015

Demo Image: 3D Rotating Side Navigation
Demo Image: 3D Rotating Side Navigation

3D Rotating Side Navigation

A vertical navigation bar that switches from an icon to text with a cool animation. HTML5 and CSS3.
Made by Arjan Jassal
October 28, 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: Vertical Dropdown Menu With Animation
Demo Image: Vertical Dropdown Menu With Animation

Vertical Dropdown Menu With Animation

Vertical pure CSS3 mega dropdown menu with animation.
Made by Rizky Kurniawan Ritonga
April 2, 2014

Demo image: Sidebar Menu Hover Show/Hide

Author

  • JFarrow

Made with

  • HTML
  • CSS

About the code

Sidebar Menu Hover Show/Hide

Sidebar menu hover show/hide with just CSS.

Demo image: Sidebar Menu

Author

  • Jon Ambas

Made with

  • HTML
  • CSS/SCSS

About the code

Sidebar Menu

Sidebar thing.

Demo Image: Fixed Side Nav Hover Effect
Demo Image: Fixed Side Nav Hover Effect

Fixed Side Nav Hover Effect

Testing out a new design concept with a pseudo element hover effect using css-transitions.
Made by Terence Devine
August 13, 2013

Toggle Menu

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

Dropdown Menu

Nice dropdown menu in HTML, CSS and JavaScript.
Made by Lukasz
June 16, 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: Hidden Menu
Demo Image: Hidden Menu

Hidden Menu

Hidden menu (CSS & HTML5).
Made by José Reyes González
December 8, 2016

Demo Image: Vertical Layout With Toggle Navigation
Demo Image: Vertical Layout With Toggle Navigation

Vertical Layout With Toggle Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Made by Ettrics
October 8, 2016

Demo Image: Toggle Menu
Demo Image: Toggle Menu

Toggle Menu

Toggle menu with HTML and CSS.
Made by Jeplaa
June 18, 2016

Demo image: Vertical Color-Adapting CSS Menu

Author

  • Ines Montani

Made with

  • HTML/Pug
  • CSS/Sass
  • JavaScript

About the code

Vertical Color-Adapting CSS Menu

Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode.

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: Pure CSS Toggle Menu
Demo Image: Pure CSS Toggle Menu

Pure CSS Toggle Menu

Its a simple toggle menu for header.
Made by Akshay Nair
August 14, 2015

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: Menu Toggle Button With Flat Menu
Demo Image: Menu Toggle Button With Flat Menu

Menu Toggle Button With Flat Menu

Menu toggle button with flat menu. Uses CSS transitions and vanilla JS.
Made by Geoffrey Crofte
June 10, 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: CSS Gooey Menu (Version 4)
Demo Image: CSS Gooey Menu (Version 4)

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4.
Made by Lucas Bebber
January 26, 2015

Demo Image: CSS Gooey Menu (Version 3)
Demo Image: CSS Gooey Menu (Version 3)

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3.
Made by Lucas Bebber
January 26, 2015

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

Toggle Menu

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

Demo Image: Simple Toggle Nav
Demo Image: Simple Toggle Nav

Simple Toggle Nav

Simple “bubble”-style navigation.
Made by Travis
January 26, 2014

Sliding Menu

Demo image: Off-screen nav with :focus-within

Author

  • Dannie Vinther

Made with

  • HTML
  • CSS

About the code

Off-Screen Nav With :focus-within

Adding yet another pure CSS technique to the list of off-screen navigation by "hacking" the :focus-within pseudo-class. Have a look at the code to see how it works.

Demo image: Slide Out Menu

Author

  • Johno

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Slide Out Menu

Mobile Slide-in menu.

Demo image: Side Reveal Effect

Author

  • Antonija Simic

Made with

  • HTML
  • CSS

About the code

Side Reveal Effect

Pure CSS side reveal effect.

Demo image: Sliding Menu

Author

  • Brady Hullopeter

Made with

  • HTML
  • CSS/SCSS

About the code

Sliding Menu

Pretty pure CSS sliding menu.

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

Menu Shelf

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

Demo Image: Pure CSS Slide Out Menu
Demo Image: Pure CSS Slide Out Menu

Pure CSS Slide Out Menu

A simple slide out menu using just CSS.
Made by Max Kurapov
August 22, 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: 3D Sliding Navigation
Demo Image: 3D Sliding Navigation

3D Sliding Navigation

CSS3 3D animated responsive sliding menu.
Made by iamarend
May 11, 2016

Demo Image: Left Slide Menu With Icon
Demo Image: Left Slide Menu With Icon

Left Slide Menu With Icon

HTML, CSS and jQuery left slide menu with icon.
Made by Roman
April 2, 2016

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: 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: Multi Level CSS Only Push Menu
Demo Image: Multi Level CSS Only Push Menu

Multi Level CSS Only Push Menu

Multi level HTML/CSS only push menu.
Made by Shven
June 19, 2014

Back to top