117 CSS Menu

June 20, 2017

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

Update of November 2016 collection. New 8 items.

Table Of Contents:

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

Related Collections:

  1. CSS Accordions
  2. CSS Breadcrumbs
  3. CSS Tabs
  4. CSS Pagination

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

Demo Image: Circular Menu
Demo Image: Circular Menu

Circular Menu

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

Demo Image: Circular Gooey Menu
Demo Image: Circular Gooey Menu

Circular Gooey Menu

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

Demo Image: HTML, CSS Radial Menu
Demo Image: Radial Menu

Radial Menu

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

Demo Image: Animated Radial/Circular Menu
Demo Image: Animated Radial/Circular Menu

Animated Radial/Circular Menu

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

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

Demo Image: Circular Links Menu
Demo Image: Circular Links Menu

Circular Links Menu

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

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

A Simple Dropdown Menu

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

Demo Image: Dropdown Menu
Demo Image: Dropdown Menu

Dropdown Menu

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

Demo Image: Zigzag Dropdown Menu Concept
Demo Image: Zigzag Dropdown Menu Concept

Zigzag Dropdown Menu Concept

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

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

Simple, CSS Only, Responsive Menu

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

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

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

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

Mobile Menu

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

App Navigation

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

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

Demo Image: SVG UI Navigation Concept
Demo Image: SVG UI Navigation Concept

SVG UI Navigation Concept

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

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

Demo Image: Mobile Navigation
Demo Image: Mobile Navigation

Mobile Navigation

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

Demo Image: Details Info & Navigation
Demo Image: Details Info & Navigation

Details Info & Navigation

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

Demo Image: Frosty Nav Toggle Effect
Demo Image: Frosty Nav Toggle Effect

Frosty Nav Toggle Effect

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

Demo Image: Mobile Menu
Demo Image: Mobile Menu

Mobile Menu

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

Demo Image: Touch Device Jelly Menu Concept
Demo Image: 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

Demo Image: Bounce Mobile Menu
Demo Image: Bounce Mobile Menu

Bounce Mobile Menu

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

Off-Canvas Menu

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

Side Menu

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

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

FreeFrontend © 2016 - 2017

Back to top