jonsuh/hamburgers

Hamburgers is a collection of animated icons for the three-line "hamburger" button that appears on mobile sites and apps to open or close a navigation menu. This library gives you more than 30 different animation styles to choose from, so that button can spin, collapse, squeeze, flip in 3D, or do a dozen other things when a user taps it. To use it, you download a single CSS file and drop it into your webpage. Then you add a short block of HTML wherever you want the button to appear, and pick which animation style you want by adding a class name like "hamburger--spin" or "hamburger--elastic" to the element. When the user clicks the button, your JavaScript adds one more class called "is-active" to play the animation. The library handles all the visual work, you only need to wire up the click event. For developers who write Sass (a tool that compiles into regular CSS), the library ships as a Sass module too. You can install it through npm, yarn, Bower, or as a Ruby gem for Rails projects. This lets you pick only the animation styles you actually need, keeping your final CSS file smaller. You can also override settings like the icon size, color, line thickness, spacing between lines, and hover effects, all through Sass variables before the library is imported. The README includes guidance on making the button accessible to people who use screen readers or keyboards. This involves adding ARIA attributes to the HTML so assistive technologies know whether the menu is open or closed, and placing the button inside a navigation element so it is easy to locate. Using a proper button element rather than a generic div is recommended, since buttons are focusable by default. The project is purely visual, a styling utility with no JavaScript of its own and no server-side component. It is a drop-in resource for any website that needs an animated menu toggle button and wants more personality than a static icon.