Tasty CSS-animated hamburgers by Jonathan Suh.
Hamburgers by Jonathan Suh is a collection of high-quality, CSS-animated hamburger menu icons designed to be easily integrated into web projects. It provides a wide variety of "tasty" animation styles that transform the traditional three-line menu icon into different shapes and states.
The main features of this tool include:
Diverse Animation Library: It offers a large selection of animation types, including Slider, Squeeze, Spin, Elastic, Vortex, and advanced 3D transforms like 3DX and 3DXY.,
Reverse Variants: Most animation types include "-r" classes, allowing developers to reverse the direction of the motion (e.g., a clockwise vs. a counter-clockwise spin).
Simple State Triggering: Animations are easily controlled by toggling a single is-active class via a small snippet of JavaScript or jQuery.,
Sass-Based Customization: Built with Sass, the library is highly modular and customizable; developers can override default variables for size, color, spacing, and transition timing before compiling.,,
Flexible Scaling: Users can switch between px, ems, or rems for their units, provided they remain consistent to avoid breaking the mathematical logic behind the icons.
Accessibility Integration: The project emphasizes inclusive design, providing documentation on using ARIA labels, roles, and tabindex to ensure the menu buttons work for users with disabilities and assistive technologies.,
High Performance: Animations utilize CSS3 3D transforms (translate3d) to leverage GPU acceleration, ensuring smooth transitions across most modern browsers.
Multiple Distribution Channels: It is easily accessible for various workflows via npm, yarn, Bower, or as a Ruby gem for Rails applications.