w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3tweaks
No Result
View All Result

27 Best CSS toggle menus

by CV
January 17, 2021
in Inputs, Navigation

Collection of hand-picked free CSS toggle menus. All the collections are included with Demo and source codes.

RelatedPosts

20 Cool jQuery Toggle Menu

15 Cool jQuery Toggle Switches

13 Cool CSS Emoji Rating

7 Best JavaScript Menu

9 Best JavaScript Toggle Menu

11 Better jQuery Star ratings

Author

  • Victor Freire
  • January 20, 2016

Link

Download

Made with

  • HTML / CSS

About the Code

Burger Menu inspired by Material Design

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

More info: Link

Dependency: –

Author

  • Mathieu Lavoie
  • January 22, 2016

Link

Download

Made with

  • Pug / SCSS / JavaScript

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

Author

  • Vivek Marakana
  • October 25, 2015

Link

Download

Made with

  • HTML / SCSS / JavaScript

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

Author

  • Kabir Singh
  • March 12, 2014

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Fixed Menu Pop Up

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

More info: Link

Dependency: –

Author

  • John Riordan
  • March 11, 2017

Link

Download

Made with

  • HTML / SCSS

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

Author

  • Jon Reece
  • June 28, 2014

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Top Drawer Nav Menu

More info: Link

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

Author

  • alan dunning
  • November 14, 2014

Link

Download

Made with

  • HTML / CSS / JavaScript

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

Author

  • BJack
  • March 12, 2014

Link

Download

Made with

  • HTML / SCSS / JavaScript

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

Author

  • Rob McFadzean
  • February 9, 2016

Link

Download

Made with

  • HTML / SCSS / JavaScript

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

Author

  • Mojtaba Seyedi
  • February 7, 2020

Link

Download

Made with

  • HTML / SCSS

About the Code

CSS Toggle menu

More info: Link

Dependency: –

Author

  • Aaron Awad
  • March 1, 2018

Link

Download

Made with

  • HTML / CSS / JavaScript

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

Author

  • Long
  • March 27, 2019

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Elastic menu

More info: Link

Dependency: –

Author

  • Akshay Nair
  • August 14, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

Pure CSS Toggle Menu

Its a simple css toggle menu for header.

More info: Link

Dependency: –

Author

  • Ines Montani
  • February 20, 2016

Link

Download

Made with

  • Pug / 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.

More info: Link

Dependency: –

Author

  • Trevor Lang
  • March 9, 2016

Link

Download

Made with

  • Pug / Sass

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

Author

  • Una Kravets
  • February 1, 2014

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Animated Menu

a simple menu for my portfolio

More info: Link

Dependency: jquery.min.js

Author

  • Alex Coven
  • December 6, 2017

Link

Download

Made with

  • HTML / CSS

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

Author

  • Mikael Ainalem
  • October 8, 2019

Link

Download

Made with

  • HTML / CSS

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

Author

  • Hadar Weiss
  • June 22, 2015

Link

Download

Made with

  • Haml / SCSS

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

Author

  • El Alemaño
  • November 4, 2020

Link

Download

Made with

  • HTML / SCSS

About the Code

Dot Menu with Buttons

More info: Link

Dependency: –

Author

  • Lucas Bebber
  • January 26, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • January 26, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • January 26, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • October 22, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1

More info: Link

Dependency: jquery.min.js

Author

  • Bryce Snyder
  • March 2, 2018

Link

Download

Made with

  • HTML / Stylus

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

Author

  • Sasha
  • May 15, 2020

Link

Download

Made with

  • HTML / SCSS

About the Code

Floating Action Button

More info: Link

Dependency: –

Author

  • Jasper LaChance
  • May 24, 2017

Link

Download

Made with

  • HTML / CSS

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

Tags: menumenusnavigationtoggle menu
Previous Post

19 Best jQuery Forms with Example and demo

Next Post

10 Useful CSS More Menu Icons

Related Posts

jQuery Toggle Menu
Inputs

20 Cool jQuery Toggle Menu

January 17, 2021
jQuery Toggle Switches
Inputs

15 Cool jQuery Toggle Switches

January 17, 2021
Cool CSS Emoji Rating
Inputs

13 Cool CSS Emoji Rating

January 14, 2021
Best JavaScript Menu
Navigation

7 Best JavaScript Menu

January 10, 2021
JavaScript Toggle Menu
Inputs

9 Best JavaScript Toggle Menu

February 3, 2021
jQuery Star ratings
Inputs

11 Better jQuery Star ratings

January 14, 2021
Next Post
CSS More Menu Icons

10 Useful CSS More Menu Icons

Leave Comment

Popular Posts

41 Multi step HTML forms

99 Hand-picked CSS Card Collections

92 CSS Text styling and Effects

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

38 CSS Calendars

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (129) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) Toggle Switches (13) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2021 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist