FreeFrontend

110 CSS Menu

November 26, 2016 | 48 Minute Read

Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding. Demo and download code (*zip).

Accordion Menu

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

download demo and code

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.

Demo GIF: Simple accordion menu with HTML, CSS and JavaScript
Accordion Menu

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016

download demo and code

See the Pen Accordion menu by JuliaRietveld (@MrsColombo) on CodePen.

Demo GIF: Accordion drop down menu
Accordion Drop Down Menu

Accordion Drop Down Menu

HTML, CSS accordion menu with jQuery. No plugins.
Made by Agustin Ortiz
November 18, 2014

download demo and code
Demo GIF: Side accordion menu
Side Accordion Menu

Side Accordion Menu

HTML, CSS, jQuery sidebar accordion menu.
Made by Benjamin
April 18, 2014

download demo and code

See the Pen Accordion Menu by Benjamin (@maggiben) on CodePen.

Demo GIF: Vertical accordion menu using jQuery and CSS3
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

link to demo and code
Demo GIF: Only CSS3 Dropdown Menu
Only CSS3 Dropdown Menu

Only CSS3 Dropdown Menu

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

download demo and code

See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.

Demo GIF: Flat Vertical Navigation
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

download demo and code

See the Pen Flat Vertical Navigation 2.0 by Andy Tran (@andytran) on CodePen.

Demo GIF: Flat Vertical Navigation
Flat Vertical Navigation

Flat Vertical Navigation

A simple flat vertical navigation with a simple dropdown menu.
Made by Andy Tran
September 1, 2014

download demo and code

See the Pen Flat Vertical Navigation by Andy Tran (@andytran) on CodePen.

Circular Menu

Demo GIF: Simple Radial Menu
Simple Radial Menu

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016

download demo and code

See the Pen Simple radial menu by Nikolay Talanov (@suez) on CodePen.

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

download demo and code

See the Pen Colourful Flower Popup Menu by Jordan LaChance (@jordanlachance) on CodePen.

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

Pure CSS 3D Radial Menu

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

download demo and code
Demo GIF: Semicircular Gooey Menu
Semicircular Gooey Menu

Semicircular Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.
Made by Lucas Bebber
October 22, 2015

download demo and code

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

Demo GIF: Pure CSS Circle Menu
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

download demo and code

See the Pen Pure CSS Circle Menu by Hadar Weiss (@hadarweiss) on CodePen.

Demo GIF: CSS Radial Menu
CSS Radial Menu

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.
Made by web-tiki
April 16, 2015

download demo and code

See the Pen CSS radial menu by web-tiki (@web-tiki) on CodePen.

Demo GIF: Circular Menu
Circular Menu

Circular Menu

Pure CSS circular menu with hover effect.
Made by Andrew Myers
April 7, 2015

download demo and code

See the Pen Circular Menu by Andrew Myers (@maskedcoder) on CodePen.

Demo GIF: Circular Gooey Menu
Circular Gooey Menu

Circular Gooey Menu

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

download demo and code

See the Pen CSS Gooey Menu (Version 2) by Lucas Bebber (@lbebber) on CodePen.

Demo GIF: HTML, CSS Radial Menu
Radial Menu

Radial Menu

HTML and CSS radial menu.
Made by Carlos
July 30, 2014

download demo and code

See the Pen Radial menu by Carlos (@bartoloxs) on CodePen.

Demo GIF: Animated Radial/Circular Menu
Animated Radial/Circular Menu

Animated Radial/Circular Menu

A radial menu made with CSS3 and JavaScript.
Made by Creative Punch
April 17, 2014

download demo and code

See the Pen Animated radial / circular menu by Creative Punch (@CreativePunch) on CodePen.

Demo GIF: Pure CSS Spin-out Menu
Pure CSS "Spin-out" Menu

Pure CSS "Spin-out" Menu

Hover the menu and all of it's items flare out!
Made by Billy Crist
June 28, 2013

download demo and code

See the Pen Pure CSS "Spin-out" Menu by Billy Crist (@billyysea) on CodePen.

Demo GIF: Circular Links Menu
Circular Links Menu

Circular Links Menu

Responsive circular links menu.
Made by Rachel Smith
October 24, 2013

download demo and code

See the Pen circular links menu (responsive) by Rachel Smith (@rachsmith) on CodePen.

Demo GIF: Simple Pure CSS Dropdown Menu
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

download demo and code

See the Pen Simple Pure CSS Dropdown Menu by Connor Brassington (@connorbrassington) on CodePen.

Demo GIF: Dropdown Navigation
Dropdown Navigation

Dropdown Navigation

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

download demo and code

See the Pen Dropdown Navigation by Ryan Morr (@ryanmorr) on CodePen.

Demo GIF: Solution For Long Drop Down Items
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

download demo and code

See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.

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

download demo and code
Demo GIF: A Simple Dropdown Menu
A Simple Dropdown Menu

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.
Made by Mike Rojas
November 4, 2014

download demo and code

See the Pen A simple Dropdown Menu by Mike Rojas (@mikerojas87) on CodePen.

Demo GIF: Dropdown Menu
Dropdown Menu

Dropdown Menu

Animated CSS dropdown menu.
Made by Kevin
April 29, 2014

download demo and code

See the Pen Dropdown Menus by Kevin (@kkrueger) on CodePen.

Demo GIF: Zigzag Dropdown Menu Concept
Zigzag Dropdown Menu Concept

Zigzag Dropdown Menu Concept

This is just another dropdown menu concept.
Made by Catalin Rosu
September 2, 2013

download demo and code

See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.

Demo GIF: Simple, CSS Only, Responsive Menu
Simple, CSS Only, Responsive Menu

Simple, CSS Only, Responsive Menu

Simple dropdown menu.
Made by John Urbank
July 17, 2013

download demo and code

See the Pen Simple, CSS only, responsive menu by John Urbank (@jurbank) on CodePen.

Fullscreen Menu

Demo GIF: Material Design Menu
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

download demo and code

See the Pen Material Design Menu by Arjan Jassal (@arjancodes) on CodePen.

Demo GIF: Burger Menu. Mobile Optimized. Modal
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

download demo and code

See the Pen Burger Menu. Mobile Optimized. Modal. by Christopher Mally (@Papawhoop) on CodePen.

Demo GIF: Velocity.js Fullscreen Flexbox Overlay Navigation
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

download demo and code
Demo GIF: Full Page Off-Canvas Navigation
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

download demo and code

See the Pen Full Page Off-Canvas Navigation by Caleb Varoga (@calebv) on CodePen.

Demo GIF: Fullscreen Menu Flexbox Method
Fullscreen Menu Flexbox Method

Fullscreen Menu Flexbox Method

Chrome and Firefox good... IE bad, no transition support for flex property.
Made by Marcus Hall
May 19, 2016

download demo and code

See the Pen Fullscreen Menu Flexbox Method by Marcus Hall (@flurrd) on CodePen.

Demo GIF: Fullscreen Flexbox Overlay Navigation
Fullscreen Flexbox Overlay Navigation

Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.
Made by Mirko Zorić
January 8, 2016

download demo and code

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

Demo GIF: Pure CSS Fullscreen Navigation Menu
Pure CSS Fullscreen Navigation Menu

Pure CSS Fullscreen Navigation Menu

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

download demo and code

See the Pen Pure CSS Fullscreen Navigation Menu by Brenden Palmer (@brenden) on CodePen.

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

download demo and code

See the Pen CSS3 + jQuery Fullscreen Menu by Anton Petrov (@apetrov) on CodePen.

Demo GIF: Fullscreen Navigation
Fullscreen Navigation
Demo GIF: Fullscreen Navigation
Fullscreen Navigation

4 Fullscreen Navigation

4 Fullscreen navigation with HTML, CSS and jQuery.
Made by ari
September 13, 2015

download demo and code

See the Pen Fullscreen Navigation by ari (@tari) on CodePen.

Demo GIF: Fullscreen Navigation
Fullscreen Navigation

Fullscreen Navigation

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

download demo and code

See the Pen Fullscreen Navigation by Marcus Bizal (@marcbizal) on CodePen.

Demo GIF: Full Screen Navigation Using SVG
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

download demo and code

See the Pen Full Screen Navigation Using SVG by Anas Ashraf (@tossedwarrior) on CodePen.

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

download demo and code

See the Pen Explosive Menu by Harris Carney (@HarrisCarney) on CodePen.

Demo GIF: Full-Screen Menu Overlay
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

download demo and code

See the Pen Full-Screen Menu Overlay by Ettrics (@ettrics) on CodePen.

Demo GIF: Full-Screen Hidden Navigation
Full-Screen Hidden Navigation

Full-Screen Hidden Navigation

It works on mobile devices as well.
Made by Anas Ashraf
March 6, 2015

download demo and code

See the Pen Full-Screen Navigation by Anas Ashraf (@tossedwarrior) on CodePen.

Demo GIF: Fullscreen Menu
Fullscreen Menu

Fullscreen Menu

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

download demo and code

See the Pen Fullscreen Menu | Type #1 by Paul van Oijen (@PaulVanO) on CodePen.

Demo GIF: Quick And Easy Fullscreen Menu
Quick And Easy Fullscreen Menu

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.
Made by Luigi Mannoni
January 31, 2015

download demo and code

See the Pen Quick and easy fullscreen menu by Luigi Mannoni (@luigimannoni) on CodePen.

Demo GIF: Animated Menu
Animated Menu

Animated Menu

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

download demo and code

See the Pen Animated Menu by Una Kravets (@una) on CodePen.

Horizontal Menu

Demo GIF: A clean Navigation Slider
A Clean Navigation Slider

A clean Navigation Slider

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

download demo and code

See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.

Demo GIF: Icon Navigation
Horizontal Icon Navigation

Horizontal Icon Navigation

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

download demo and code

See the Pen Icon Navigation by Marco Biedermann (@marcobiedermann) on CodePen.

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

download demo and code

See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.

Demo GIF: Slide-Menu #2
Slide-Menu #2

Slide-Menu #2

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

download demo and code

See the Pen Slide-Menu 2 by Aaron Benjamin (@abenjamin) on CodePen.

Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #1
Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #2
Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #3
Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #4
Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #5
Demo GIF: Beautiful Navigation Hover Effects
Beautiful Navigation Hover Effects #6

Beautiful Navigation Hover Effects

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

download demo and code

See the Pen Navigation Effects by Dominik Biedebach (@d2k) on CodePen.

Demo GIF: Horizontal Skewed Menu
Horizontal Skewed Menu

Horizontal Skewed Menu

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

download demo and code

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.

Demo GIF: Simple Menu Navigation
Simple Menu Navigation

Simple Menu Navigation

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

download demo and code

See the Pen Simple Menu Navigation by Karim Balaa (@karimbalaa) on CodePen.

Demo GIF: Transparent Fading Navigation Bar
Transparent Fading Navigation Bar

Transparent Fading Navigation Bar

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

download demo and code

See the Pen Transparent Fading Navigation Bar by MrPirrera (@pirrera) on CodePen.

Demo GIF: CSS3 Responsive Menu Effect
CSS3 Responsive Menu Effect

CSS3 Responsive Menu Effect

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

download demo and code

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.

Mobile Menu

Demo GIF: Animated Mobile Navigation
Animated Mobile Navigation

Animated Mobile Navigation

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

download demo and code

See the Pen Animated Navigation by Greg Hovanesyan (@gregh) on CodePen.

Demo GIF: Secret UI Project
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

download demo and code

See the Pen Secret Project by Mohan Khadka (@khadkamhn) on CodePen.

Demo GIF: Mobile Filter Menu
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

download demo and code

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.

Demo GIF: App Navigation
App Navigation

App Navigation

Concept for mobile app navigation.
Made by Ian Turner
May 3, 2016

download demo and code

See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.

Demo GIF: Mobile Navigation Animation
Mobile Navigation Animation

Mobile Navigation Animation

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking...
Made by Karlo Videk
April 22, 2016

download demo and code

See the Pen Mobile navigation animation by Karlo Videk (@karlovidek) on CodePen.

Demo GIF: SVG UI Navigation Concept
SVG UI Navigation Concept

SVG UI Navigation Concept

Just SVG & CSS3 animations, without any animation libraries.
Made by Alex Permyakov
March 31, 2016

download demo and code

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.

Demo GIF: Gooey Mobile Navigation
Gooey Mobile Navigation

Gooey Mobile Navigation

The cool gooey effect applied to a mobilestyle menu. Jquery and CSS transitions for the animations.
Made by BjurhagerStudios
June 29, 2015

download demo and code

See the Pen Gooey mobile navigation by BjurhagerStudios (@Bjurhager) on CodePen.

Demo GIF: Mobile Navigation
Mobile Navigation

Mobile Navigation

HTML, CSS and jQuery mobile navigation.
Made by Paul van Oijen
March 16, 2015

download demo and code

See the Pen Mobile Navigation #1 by Paul van Oijen (@PaulVanO) on CodePen.

Demo GIF: Details Info & Navigation
Details Info & Navigation

Details Info & Navigation

Navigation with jQuery, CSS and HTML.
Made by Mohan Khadka
January 4, 2016

download demo and code

See the Pen Details Info & Navigation by Mohan Khadka (@khadkamhn) on CodePen.

Demo GIF: Frosty Nav Toggle Effect
Frosty Nav Toggle Effect

Frosty Nav Toggle Effect

HTML, CSS and jQuery frosty navigation toggle effect.
Made by Graham Wilsdon
July 22, 2015

download demo and code

See the Pen Frosty Nav Toggle Effect by Graham Wilsdon (@GrahamWilsdon) on CodePen.

Demo GIF: Mobile Menu
Mobile Menu

Mobile Menu

HTML, CSS and jQuery effect for mobile menu.
Made by Virgil Pana
March 1, 2015

download demo and code

See the Pen Menu 1 by Virgil Pana (@virgilpana) on CodePen.

Demo GIF: Touch Device Jelly Menu Concept
Touch Device Jelly Menu Concept

Touch Device Jelly Menu Concept

Touch device jelly menu concept with HTML, CSS and JavaScript.
Made by LegoMushroom
January 10, 2014

download demo and code

See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.

Demo GIF: Bounce Mobile Menu
Bounce Mobile Menu

Bounce Mobile Menu

Menu animation with HTML, CSS and jQuery.
Made by Matt Hoiland
October 10, 2013

download demo and code

See the Pen Bounce Menu by Matt Hoiland (@matthoiland) on CodePen.

Off-Canvas Menu

Demo GIF: Off-canvas Menu Animation With Burger Icon
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

download demo and code
Demo GIF: CSS3 Off-Canvas Panel With Menu
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

download demo and code

See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.

Demo GIF: Offcanvas Sidebar Menu With A Twist
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

download demo and code

See the Pen Offcanvas sidebar menu with a twist by Devilish Alchemist (@devilishalchemist) on CodePen.

Demo GIF: Off Canvas Menu
Off Canvas Menu

Off Canvas Menu

Little off canvas animated menu.
Made by Mark Murray
November 28, 2014

download demo and code

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.

Demo GIF: Material Design Navigation
Material Design Navigation

Material Design Navigation

The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 2014

download demo and code

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.

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

download demo and code
Demo GIF: Fixed Flyout/Off-Canvas Navigation
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

download demo and code
Demo GIF: iOS Style Sliding Menu
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

download demo and code

See the Pen iOS style sliding menu by Jason Howmans (@jasonhowmans) on CodePen.

Side Menu

Demo GIF: Fixed Side Drawer Navigation
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

download demo and code

See the Pen Fixed Hover Navigation by Vince Brown (@Vince_Brown) on CodePen.

Demo: Fully Responsive CSS3 Menu
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

download demo and code

See the Pen Fully responsive CSS3 menu by Claudio Holanda (@kazzkiq) on CodePen.

Demo GIF: Side Sliding Menu CSS
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

download demo and code

See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.

Demo GIF: 3D Rotating Side Navigation
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

download demo and code

See the Pen 3D Rotating Navigation by Arjan Jassal (@arjancodes) on CodePen.

Demo GIF: CSS3 Funny Side Menu
CSS3 Funny Side Menu

CSS3 Funny Side Menu

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

download demo and code

See the Pen CSS3 Funny Menu by FreeFrontend (@cssparadise) on CodePen.

Demo GIF: Vertical Dropdown Menu With Animation
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

download demo and code

See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizky_k_r) on CodePen.

Demo GIF: Sidebar Menu Hover Show/Hide CSS
Sidebar Menu Hover Show/Hide CSS

Sidebar Menu Hover Show/Hide CSS

Sidebar menu hover show/hide with just CSS.
Made by JFarrow
February 12, 2014

download demo and code

See the Pen Sidebar Menu Hover Show/Hide CSS by JFarrow (@JFarrow) on CodePen.

Demo GIF: Fixed Side Nav Hover Effect
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

download demo and code

See the Pen Fixed nav hover effect by Terence Devine (@tdevine33) on CodePen.

Toggle Menu

Demo GIF: Hidden Menu
Hidden Menu

Hidden Menu

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

download demo and code

See the Pen Hidden menu (CSS & HTML5) by José Reyes González (@jreyesgs) on CodePen.

Demo GIF: Vertical Layout With Toggle Navigation
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

download demo and code

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

Demo GIF: Toggle Menu
Toggle Menu

Toggle Menu

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

download demo and code

See the Pen Dropdown Menu UI by Jeplaa (@Jeplaa) on CodePen.

Demo GIF: Header Navigation Menu
Header Navigation Menu

Header Navigation Menu

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

download demo and code

See the Pen Header Navigation Menu by Kyle Lavery (@koenigsegg1) on CodePen.

Demo GIF: Pure CSS Toggle Menu
Pure CSS Toggle Menu

Pure CSS Toggle Menu

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

download demo and code

See the Pen Pure CSS Toggle Menu by Akshay Nair (@phenax) on CodePen.

Demo GIF: Hamburger Icon With Morphing Menu
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

download demo and code
Demo GIF: Menu Toggle Button With Flat Menu
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

download demo and code

See the Pen Menu Toggle button with flat menu by Geoffrey Crofte (@CreativeJuiz) on CodePen.

Demo GIF: Simple JS Mobile Navigation
Simple JS Mobile Navigation

Simple JS Mobile Navigation

Simple JS mobile navigation with HTML and CSS.
Made by Kieran Hunter
May 26, 2015

download demo and code

See the Pen Simple JS mobile navigation by Kieran Hunter (@kieranfivestars) on CodePen.

Demo GIF: CSS Gooey Menu (Version 4)
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

download demo and code

See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.

Demo GIF: CSS Gooey Menu (Version 3)
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

download demo and code

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.

Demo GIF: Triangular Mobile Toggle Navigation
Triangular Mobile Toggle Navigation

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.
Made by MoKev
October 12, 2014

download demo and code

See the Pen Triangular mobile navigation by MoKev (@MoKev) on CodePen.

Demo GIF: Toggle Menu
Toggle Menu

Toggle Menu

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

download demo and code

See the Pen Menu by Yoann (@yoannhel) on CodePen.

Demo GIF: Simple Toggle Nav
Simple Toggle Nav

Simple Toggle Nav

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

download demo and code

See the Pen Simple Nav by Travis (@trhino) on CodePen.

Sliding Menu

Demo GIF: Angled Menu
Angled Menu

Angled Menu

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

download demo and code

See the Pen Angled Menu by Keith Light (@keefyboooo) on CodePen.

Demo GIF: Menu Shelf
Menu Shelf

Menu Shelf

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

download demo and code

See the Pen Menu Shelf by Alex Coven (@alcoven) on CodePen.

Demo GIF: Pure CSS Slide Out Menu
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

download demo and code

See the Pen Pure CSS Slide Out Menu by Max Kurapov (@mkurapov) on CodePen.

Demo GIF: Simple jQuery Slide Menu
Simple jQuery Slide Menu

Simple jQuery Slide Menu

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

download demo and code

See the Pen Simple jQuery Slide Menu by P.S.Blakemore (@PSBlakemore) on CodePen.

Demo GIF: 3D Sliding Navigation
3D Sliding Navigation

3D Sliding Navigation

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

download demo and code

See the Pen 3D Off-canvas navigation by iamarend (@iamarend) on CodePen.

Demo GIF: Left Slide Menu With Icon
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

download demo and code

See the Pen Left slide menu with icon by Roman (@ramzs) on CodePen.

Demo GIF: Sliding Navigation Menu
Sliding Navigation Menu

Sliding Navigation Menu

Sliding navigation menu is hidden by default.
Made by Aleh Isakau
October 4, 2015

download demo and code

See the Pen Off canvas menu by Aleh Isakau (@piupiupiu) on CodePen.

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

download demo and code

See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.