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
- CSS Menus
- CSS Circle Menus
- CSS Dropdown Menus
- CSS Mobile Menus
- CSS Sidebar Menus
- CSS Horizontal Menus
- CSS Fullscreen Menus
- CSS Sliding Menus
- CSS Off-Canvas Menus
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Toggle Menu Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Hidden Menu
HTML5 and CSS3 hidden menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


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

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


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


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

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


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


Links
Made with
- HTML / CSS / JavaScript
About the code
Menu Toggle Button with Flat Menu
Menu toggle button with flat menu. Uses CSS transition
s and vanilla JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -