Collection of hand-picked free CSS toggle menus. All the collections are included with Demo and source codes.
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
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
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
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
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
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
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
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
