Download
Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger. The hamburger button belongs inside the <nav> so that assistive technologies will be able to locate the navigation, and to allow these users to easily locatate the hamburger button, without having to search up and down the DOM, once they realize they've found themselves in an empty navigation. Animations use CSS3 3D transforms (translate3d whenever possible for GPU acceleration), which is supported by most browsers (not supported by IE9 and older and Opera Mini). Wanna work with ems or rems instead of px? Just change all the px values to the unit of your choice. Note: Be consistent (all px or all ems), otherwise it may break, the math behind the customization will fail if it attempts to perform operations with values of different units.
Features
- Customize your hamburger and/or remove any types you don’t want in hamburgers.scss
- Be sure to run the CSS through Autoprefixer since the Sass doesn’t account for vendor prefixes
- Hamburger menu icons can be useful in the right context, but they’re not the most accessible
- ARIA will help make it accessible to people with disabilities
- A label can help make it more obvious that it toggles a menu
- Animations use CSS3 3D transforms (translate3d whenever possible for GPU acceleration)
Project Samples
