27 Best CSS toggle menus

About the Code

Burger Menu inspired by Material Design

A simple checkbox burger menu inspired by Material Design for Android.

More info: Link

Dependency: –

About the Code

Apple style mobile menu

Inspired by mobile menu made by Apple. Pretty easy but also pretty efficient in terms of visual impact! 😉 Love the minimalist look of the 2 bars burger.

More info: Link

Dependency: –

About the Code

Gooey Menu Concept

Add button menu concept with gooey animations just using SVG and CSS3.

More info: Link

Dependency: fonts.google(family=Exo+2:300,500,500italic), font-awesome.min.css

About the Code

Fixed Menu Pop Up

A simple fixed pop up menu – tested on Android and Iphone.

More info: Link

Dependency: –

About the Code

Tumblr inspired menu (pure css)

No JS. Inspired somewhat by the Tumblr iPad app post creation menu. Could use animations rather than transitions with different timing on each menu item to fancify it a bit. I just wanted to keep this as simple and straightforward as possible.

More info: Link

Dependency: –

About the Code

Top Drawer Nav Menu

More info: Link

Dependency: onts.google(family=Lato), jquery.min.js

About the Code

jQuery / CSS navigation menu

Simple jQuery / CSS hamburger style menu button with pop out menu

More info: Link

Dependency: jquery.min.js

About the Code

Mobile Menu

Playing around with some menu burger action. Menu slides down from the top, while the menu trigger animates to the close button, and vice versa.

More info: Link

Dependency: jquery.min.js

About the Code

Fullscreen Navigation

Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS

More info: Link

Dependency: CSS – normalize.min.css, animate.css, font-awesome.min.css JS – jquery.min.js

About the Code

CSS Toggle menu

More info: Link

Dependency: –

About the Code

Multi-level Side Nav Menu

This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its labels and clicking the hamburger icon pins the menu open.

More info: Link

Dependency: font-awesome.css, jquery.min.js

About the Code

Elastic menu

More info: Link

Dependency: –

About the Code

Pure CSS Toggle Menu

Its a simple css toggle menu for header.

More info: Link

Dependency: –

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.

More info: Link

Dependency: –

About the Code

Pure CSS Menu Drawer

I have questions about the usability of something like this, but it is a handy way to create a slide out drawer without javascript.

More info: Link

Dependency: jquery.min.js

About the Code

Animated Menu

a simple menu for my portfolio

More info: Link

Dependency: jquery.min.js

About the Code

Material More Button CSS

More Info button with material design style. Let me know if you’ve seen something like this. Used input:checked and a checkbox to build this, then used a tags to protect the click from unchecking the checkbox.

More info: Link

Dependency: –

About the Code

The more menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

More info: Link

Dependency: –

About the Code

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.

More info: Link

Dependency: –

About the Code

Dot Menu with Buttons

More info: Link

Dependency: –

About the Code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4

More info: Link

Dependency: jquery.min.js

About the Code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3

More info: Link

Dependency: jquery.min.js

About the Code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2

More info: Link

Dependency: jquery.min.js

About the Code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1

More info: Link

Dependency: jquery.min.js

About the Code

Pure CSS3 Parallax Menu

Using only CSS creating a slide out menu with animations with pseudo siblings and checkbox. Also works with mobile.

More info: Link

Dependency: bootstrap.min.css

About the Code

Floating Action Button

More info: Link

Dependency: –

About the Code

Colourful Flower Popup Menu

This mobile inspired flower popup menu is a colourful fun project I’m experimenting with. Feel free to use it however you like.

More info: Link

Dependency: font-awesome.min.css, jquery.min.js