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.

Accordion Menu

Slide Accordion Menu

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

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.

Accordion Menu

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

Accordion Drop Down Menu

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

Side 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

Only CSS3 Dropdown Menu

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

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

Flat Vertical Navigation

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

Circular Menu

Author

Jesús Castro
September 1, 2017

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
June 20, 2017

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.

Circular Menu

Rings Navigation Concept

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

Circular Navigation Concept

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

Author

Kapilraj Parameswararajah
June 24, 2016

Made with

HTML
CSS

About the code

Circular Menu Navigation

Animated HTML and CSS circular menu.

Author

Mahmoud
June 23, 2016

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Floating Circular Menu

Pretty floating circular menu with HTML, CSS and JS.

Simple Radial Menu

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

Colourful Flower Popup Menu

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

Author

sanjeev yadav
February 5, 2016

Made with

HTML
CSS
JavaScript

About the code

Circular NavBar

Inspired from google material design and circles.

Pure CSS 3D Radial Menu

Author

Simon Gooder
October 23, 2015

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Circular Material Menu

Unusual circular 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
July 30, 2015

Made with

HTML/Pug
CSS/Stylus

About the code

Circular Menu

Navigation: hamburger circular menu.

Author

Mojtaba Seyedi
June 23, 2015

Made with

HTML
CSS

About the code

Circular Menu

Pure CSS circular 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

Author

web-tiki
April 16, 2015

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.

Author

Andrew Myers
April 7, 2015

Made with

HTML
CSS

About the code

Circular Menu

Pure CSS circular menu with hover effect.

Author

Lucas Bebber
January 26, 2015

Made with

HTML
CSS/SCSS
JavaScript

About the code

Circular Gooey Menu

Gooey menu with CSS and SVG filters. Version 2.

Author

Carlos
July 30, 2014

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
April 17, 2014

Made with

HTML
CSS
JavaScript

About the code

Animated Radial/Circular Menu

Animated radial menu made with CSS3 and JavaScript.

Author

Niels Van Limberghen
February 6, 2014

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.

Author

Billy Crist
June 28, 2013

Made with

HTML
CSS/SCSS

About the code

Pure CSS Spin-Out Menu

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

Author

Rachel Smith
October 24, 2013

Made with

HTML
CSS
JavaScript

About the code

Circular Links Menu

Responsive circular links menu.

Demo image: Circular Navigation With CSS

Author

Sara Soueidan
August 9, 2013

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.

Dropdown Menu

Author

Veronica
March 10, 2018

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Dropdown Menu

Custom dropdown menu.

Author

Sean Codes
January 10, 2018

Made with

HTML
CSS
JavaScript

About the code

Recursive Hover Nav

Only CSS recursive hover navigation.

Author

Lukasz
June 16, 2017

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
May 15, 2017

Made with

HTML/Haml
CSS/SCSS

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

Author

naymapl
May 4, 2017

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Dropdown Menu

Dropdown menu with jQuery.

Author

Rian Ariona
September 21, 2016

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
August 2, 2016

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.

Author

Ruslan Pivovarov
July 31, 2016

Made with

HTML/Pug
CSS/SCSS

About the code

Dropdown Menu Effects

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

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

Author

Dany Santos
April 30, 2016

Made with

HTML
CSS
JavaScript

About the code

Dropdown Menu Animation

Nice dropdown menu with animation.

Author

Kyle Lavery
March 28, 2016

Made with

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

About the code

Dropdown Menu

Dropdown menu with little jQuery.

Author

Ariana Lynn
March 18, 2016

Made with

HTML
CSS
JavaScript

About the code

Dropdown

Pretty dropdown menu.

Dropdown Navigation

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

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

Author

Rlski
March 12, 2015

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.

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

Author

Sathish kumar
February 19, 2015

Made with

HTML
CSS/SCSS

About the code

Dropdown Menu

Pure CSS dropdown menu.

Author

Mike Rojas
November 4, 2014

Made with

HTML/Pug
CSS/SCSS

About the code

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.

Author

Andy Tran
September 2, 2014

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.

Author

Kevin
April 29, 2014

Made with

HTML
CSS/SCSS

About the code

Dropdown Menu

Animated CSS dropdown menu.

Author

Eric Sadowski
February 20, 2014

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.

Author

Jeplaa
January 20, 2014

Made with

HTML
CSS

About the code

Dropdown Menu UI

Pure CSS dropdown menu.

Demo image: Zigzag Dropdown Menu Concept

Author

Catalin Rosu
September 2, 2013

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
July 17, 2013

Made with

HTML
CSS

About the code

Simple, CSS Only, Responsive Menu

Simple dropdown menu.

Author

Lauren
July 14, 2013

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

Author

Erin E. Sullivan
February 5, 2018

Made with

HTML
CSS

About the code

Simple And Responsive Menu

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

Author

Brandon Ward
June 22, 2017

Made with

HTML
CSS/SCSS
JavaScript

About the code

Full Width Menu

Full width menu & SVG animation.

Mega Menu CSS

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

Author

veronika
May 24, 2017

Made with

HTML
CSS
JavaScript

About the code

Fullscreen Menu

Fullscreen menu with Flexbox & jQuery.

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

Burger Menu. Mobile Optimized. Modal

Modal, mobile optimized burger menu with HTML, CSS and JavaScript.
Made by Christopher Mally
November 1, 2016

Author

Em Ji Madhu
October 5, 2016

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Real Fullscreen Navigation

A full viewport responsive navigation.

Author

Andrew Peirs
August 17, 2016

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Fullscreen Menu

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

Velocity.js Fullscreen Flexbox Overlay Navigation

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

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
May 19, 2016

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.

Author

Rob McFadzean
February 9, 2016

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.

Author

Felipe Espinoza
February 2, 2016

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Menu Fullscreen

Menu fullscreen CSS.

Author

Akshay Nair
January 9, 2016

Made with

HTML
CSS/SCSS

About the code

Fullscreen Menu

Pure CSS fullscreen menu.

Fullscreen Flexbox Overlay Navigation

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

Pure CSS Fullscreen Navigation Menu

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

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
November 21, 2015

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.

4 Fullscreen Navigation

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

Fullscreen Navigation

Author

Paulo César da Conceição Ferreira Junior
August 14, 2015

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.

Full Screen Navigation Using SVG

Full screen navigation using SVG, HTML, CSS and jQuery.
Made by Anas Ashraf
July 2, 2015

Author

Marcus Bizal
June 25, 2015

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Fullscreen Navigation

Fullscreen navigation with HTML, CSS and JS.

Author

Jannik Baranczyk
May 22, 2015

Made with

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

About the code

Fullscreen Menu

Simple fullscreen menu.

Author

Brenden Palmer
May 17, 2015

Made with

HTML
CSS/Less

About the code

Fullscreen Navigation Menu

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

Author

Matthew Blode
April 4, 2015

Made with

HTML
CSS/SCSS
JavaScript

About the code

Fullscreen Nav

Burger minimal, fullscreen navigation.

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

Fullscreen Menu

Demo image: Accessible Fullscreen Overlay Menu

Author

RaziTazi
February 5, 2015

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
January 31, 2015

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.

Author

Gerhard Bliedung
August 27, 2014

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Fullscreen Menu

Fullscreen hamburger menu.

Animated Menu

Horizontal Menu

Author

Mehmet Burak Erman
December 18, 2017

Made with

HTML
CSS/SCSS

About the code

Menu Hover Line Effect

Nice and simple menu hover line effect.

Author

Charlie Marcotte
September 5, 2017

Made with

HTML/Pug
CSS/Sass

About the code

CSS Menu Concept

CSS menu concept with clip-path

Author

Artyom
June 23, 2017

Made with

HTML
CSS/SCSS

About the code

Strikethrough Hover Effect

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

Lavalamp CSS Menu

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

A Clean Navigation Slider

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

Horizontal Icon Navigation

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

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

Slide-Menu #2

Beautiful Navigation Hover Effects

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

Horizontal Skewed Menu

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

Simple Menu Navigation

Transparent Fading Navigation Bar

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

CSS3 Responsive Menu Effect

Mega Menu

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.

Author

Droidadda Inc
August 28, 2017

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu for mobile view.

Author

Kalpesh Singh
July 31, 2017

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Responsive Mega Menu

Responsive mega menu with flexbox.

Author

Mike Torosian
October 4, 2016

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

Author

Arjun Amgain
August 6, 2015

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
May 11, 2015

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

Author

Leonardo Crecente
March 8, 2018

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.

Author

Stas Melnikov
February 12, 2018

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.

Author

Kyle Lavery
January 23, 2018

Made with

HTML/Pug
CSS/SCSS
JavaScript/Babel

About the code

Mobile Menu Concept

A concept inspired by Daniel Korpai's Dribbble post.

Author

tiffany choong
October 19, 2017

Made with

HTML
CSS/SCSS
JavaScript/Babel

About the code

Magical Mobile Mega Menu

Mega menu for mobile with little JavaScript.

Author

Mikael Ainalem
August 23, 2017

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
May 17, 2017

Made with

HTML
CSS/SCSS
JavaScript/Babel

About the code

Animated Accessible Navigation

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

Radial Menu Animation

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

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

Pure CSS Navigation Simple & Easy

Animated Mobile Navigation

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

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

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016

Author

Ian Turner
May 3, 2016

Made with

HTML
CSS
JavaScript

About the code

App Navigation

Concept for mobile app navigation.

Author

Karlo Videk
April 22, 2016

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

Author

Alex Permyakov
March 31, 2016

Made with

HTML
CSS
JavaScript

About the code

SVG UI Navigation Concept

Just SVG & CSS3 animations, without any animation libraries.

Author

Mohan Khadka
January 4, 2016

Made with

HTML
CSS
JavaScript

About the code

Details Info & Navigation

Navigation with jQuery, CSS and HTML.

Author

BjurhagerStudios
June 29, 2015

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.

Author

Graham Wilsdon
July 22, 2015

Made with

HTML
CSS
JavaScript

About the code

Frosty Nav Toggle Effect

HTML, CSS and jQuery frosty navigation toggle effect.

Author

Virgil Pana
March 1, 2015

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
January 10, 2014

Made with

HTML
CSS
JavaScript

About the code

Touch Device Jelly Menu Concept

Touch device jelly menu concept with HTML, CSS and JavaScript.

Author

Matt Hoiland
October 10, 2013

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
February 6, 2018

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.

Author

Envato Tuts+
January 22, 2018

Made with

HTML
CSS
JavaScript/Babel

About the code

Off-Canvas Menu

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

Author

Joshua Ward
December 13, 2017

Made with

HTML
CSS/SCSS

About the code

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

Author

James Zedd
May 23, 2017

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.

Off-Canvas Menu Animation With Burger Icon

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

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

Author

Carlos Tur
June 23, 2016

Made with

HTML
CSS
JavaScript

About the code

Off-Canvas Menu

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

Author

Tyler Fowle
April 9, 2015

Made with

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

About the code

Off Canvas Nav

Sass off-canvas navigation.

Author

Caleb Varoga
January 20, 2015

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Full Page Off-Canvas Navigation

Offcanvas Sidebar Menu With A Twist

HTML, CSS and jQuery offcanvas sidebar menu with a twist.
Made by Devilish Alchemist
January 13, 2015

Off Canvas Menu

Material Design Navigation

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

Author

Adam Carignan
October 29, 2014

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
October 1, 2014

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.

Author

Mary Lou
August 16, 2014

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.

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
July 3, 2014

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

Author

Nicholas M. Smith
May 15, 2014

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.

Fixed Flyout/Off-Canvas Navigation

A responsive fixed menu that’s always right there.
Made by Colin
April 3, 2014

Author

Oliver Knoblich
July 23, 2013

Made with

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

About the code

Flexbox Off Canvas Menu

Lightweight, simple, easy to use.

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.

Sidebar Menu

Author

Ferran Buireu
February 17, 2018

Made with

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

About the code

Responsive Sidebar/Navbar

Vertical/Horizontal responsive sidebar/navbar.

Author

azouaoui mohamed
December 13, 2017

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.

Author

MAHESH AMBURE
September 7, 2017

Made with

HTML
CSS
JavaScript (jquery.js)

About the code

Sidebar Indicators

Sidebar menu with indicators.

Author

Boomer
June 5, 2017

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.

Author

Sean Codes
May 22, 2017

Made with

HTML/Pug
CSS
JavaScript

About the code

Mirror Like Nav

CSS only mirror like nav.

Author

Milica
May 21, 2017

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.

Author

Milica
April 17, 2017

Made with

HTML
CSS/SCSS

About the code

Sidebar

CSS navbar & sidebar.

Author

Shawn Reisner
January 12, 2017

Made with

HTML
CSS/SCSS

About the code

Sidebar Menu

Purple sidebar menu.

Author

Daniel
February 17, 2016

Made with

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

About the code

Sidebar Navigation

Sidebar navigation with tooltips.

Author

Stephen Scaff
August 27, 2015

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.

Author

magnificode
June 8, 2015

Made with

HTML
CSS/SCSS

About the code

Sidebar Nav Animation

Nothing like a little trendy body pushin.

Fixed Side Drawer Navigation

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

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

Side Sliding Menu CSS

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

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

CSS3 Funny Side Menu

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
February 12, 2014

Made with

HTML
CSS

About the code

Sidebar Menu Hover Show/Hide

Sidebar menu hover show/hide with just CSS.

Author

Jon Ambas
January 3, 2014

Made with

HTML
CSS/SCSS

About the code

Sidebar Menu

Sidebar thing.

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
August 3, 2017

Made with

HTML
CSS/SCSS
JavaScript (jquery.js)

About the code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

Dropdown Menu

Fancy Toggle Menu

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

NavMenu

Hidden Menu

Vertical Layout With Toggle Navigation

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

Toggle Menu

Demo image: Vertical Color-Adapting CSS Menu

Author

Ines Montani
February 20, 2016

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.

Header Navigation Menu

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

Pure CSS Toggle Menu

Hamburger Icon With Morphing Menu

Creative menu made with HTML, SASS/CSS3 and JQuery.
Made by Sergio
July 15, 2015

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

Simple JS Mobile Navigation

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

CSS Gooey Menu (Version 4)

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

CSS Gooey Menu (Version 3)

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

Triangular Mobile Toggle Navigation

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

Toggle Menu

Simple Toggle Nav

Sliding Menu

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

Author

Dannie Vinther
September 7, 2017

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.

Author

Johno
July 4, 2017

Made with

HTML
CSS/SCSS
JavaScript

About the code

Slide Out Menu

Mobile Slide-in menu.

Author

Antonija Simic
June 28, 2017

Made with

HTML
CSS

About the code

Side Reveal Effect

Pure CSS side reveal effect.

Author

Brady Hullopeter
January 12, 2017

Made with

HTML
CSS/SCSS

About the code

Sliding Menu

Pretty pure CSS sliding menu.

Angled Menu

Menu Shelf

Pure CSS Slide Out Menu

Simple jQuery Slide Menu

3D Sliding Navigation

Left Slide Menu With Icon

Demo image: SVG Gooey Hover Menu Concept

Author

Michael Leonard
March 4, 2016

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.

Sliding Navigation Menu

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

FreeFrontend

212 CSS Menu

Table of Contents

Accordion Menu

Slide Accordion Menu

Swanky Pure CSS Drop Down Menu

Accordion Menu

Accordion Drop Down Menu

Side Accordion Menu

Vertical Accordion Menu Using jQuery And CSS3

Only CSS3 Dropdown Menu

Flat Vertical Navigation

Flat Vertical Navigation

Circular Menu

Author

Links

Made with

About the code

Circle Navigation

Author

Links

Made with

About the code

Radial/Circular Menu Concept

Circular Menu

Rings Navigation Concept

Circular Navigation Concept

Author

Links

Made with

About the code

Circular Menu Navigation

Author

Links

Made with

About the code

Floating Circular Menu

Simple Radial Menu

Colourful Flower Popup Menu

Author

Links

Made with

About the code

Circular NavBar

Pure CSS 3D Radial Menu

Author

Links

Made with

About the code

Circular Material Menu

Semicircular Gooey Menu

Author

Links

Made with

About the code

Circular Menu

Author

Links

Made with

About the code

Circular Menu

Pure CSS Circle Menu

Author

Links

Made with

About the code

CSS Radial Menu

Author

Links

Made with

About the code

Circular Menu

Author

Links

Made with

About the code

Circular Gooey Menu

Author

Links

Made with

Free
Frontend