Check out this collection of animated hamburgers. All set up to work out of the box with the mmenu.js plugin. Click a hamburger to see the animation (and make sure the menu on the left is closed).
The mburger.css and mburger.js files are licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.
Install with NPM:
npm install mburger-css
Download directly from the Github repository.
There are two ways to get an animated hamburger on your webpage: With plain good ol' HTML and CSS, or with a new and fancy native webcomponent.
By default, the hamburger icon adopts to its environment pretty good, the bars scale to fit and inherit their color for the parent element. The hamburger icon is pretty easy to customize too, just override some of the CSS values and variables.
||The background-color for the button.|
||Add a border around the button.|
||Gives the button rounded corners, use
||The color for the bars.|
||The height for the button.|
||The width for the button.|
||Width and height for the button.|
||Width for the bars as a float (0 = 0%, 1 = 100%), relative to the button (the bars are horizontally centered).|
||Height for the bars (the bars are vertically centered).|
||Distance between bars (approximately).|
||Timeout before starting the animation, ensures the animation starts after the menu is fully opened.|