Collection of hand-picked free HTML and CSS toggle menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Related Articles

  1. CSS Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Horizontal Menus
  7. CSS Fullscreen Menus
  8. CSS Sliding Menus
  9. CSS Off-Canvas Menus

Author

  • Nitish tyagi

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Toggle Menu Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Hidden Menu Hidden Menu - GIF Demo

Author

  • José Reyes González

Links

Made with

  • HTML / CSS (SCSS)

About the code

Hidden Menu

HTML5 and CSS3 hidden menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Vertical Color-Adapting CSS Menu Vertical Color-Adapting CSS Menu - GIF Demo

Author

  • Ines Montani

Links

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Dario Fuzinato

Links

Made with

  • HTML / CSS (SCSS)

About a code

Animated Menu

Concept for animated social menu. Pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Alex Berkowitz

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Toggle Menu

Simple expanding menu using only CSS. The idea could be further refined with a tiny bit of JavaScript to automatically set the width to adjust based on the contents, allowing for buttons of varying width or expansion of the menu without changing the CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Toggle Menu Pure CSS Toggle Menu - GIF Demo

Author

  • Akshay Nair

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Toggle Menu

Its a simple toggle menu for header.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple JS Mobile Navigation

Author

  • Kieran Hunter

Links

Made with

  • HTML / CSS / JS

About a code

Simple JS Mobile Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Demo image: Vertical Layout with Navigation Vertical Layout with Navigation - GIF Demo

Author

  • Ettrics

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Vertical Layout with Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Gooey Menu Gooey Menu - GIF Demo

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 2) CSS Gooey Menu (Version 2) - GIF Demo

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 3) CSS Gooey Menu (Version 3) - GIF Demo

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 4) CSS Gooey Menu (Version 4) - GIF Demo

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Triangular Mobile Toggle Navigation

Author

  • MoKev

Links

Made with

  • HTML / CSS (Stylus)

About a code

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Simple Toggle Navigation Simple Toggle Navigation - GIF Demo

Author

  • Travis

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (CoffeeScript)

About the code

Simple Toggle Navigation

Simple "bubble"-style navigation. Saw something similar on a newspaper's mobile site (I can't remember which one) and wanted to try and make it myself.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Menu Toggle Button with Flat Menu Menu Toggle Button with Flat Menu - GIF Demo

Author

  • Geoffrey Crofte

Links

Made with

  • HTML / CSS / JavaScript

About the code

Menu Toggle Button with Flat Menu

Menu toggle button with flat menu. Uses CSS transitions and vanilla JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -