Author: | march08 |
---|---|
Views Total: | 4,491 views |
Official Page: | Go to website |
Last Update: | January 31, 2019 |
License: | MIT |
Preview:

Description:
A collection of 8 awesome toggle animations created for hamburger buttons of your mobile & desktop navigation system.
Written in pure HTML and CSS/CSS3.
Available animations:
- SQUEEZE
- SLIDE
- SLIP
- ROTATE
- ARROW
- ARROW RIGHT
- ARROW UP
- ARROW DOWN
How to use it:
Load an animation of your choice in the document.
<link href="Burger/dist/styles.css" rel="stylesheet" type="text/css"> <link href="BurgerArrow/dist/styles.css" rel="stylesheet" type="text/css"> <link href="BurgerRotate/dist/styles.css" rel="stylesheet" type="text/css"> <link href="BurgerSlide/dist/styles.css" rel="stylesheet" type="text/css"> <link href="BurgerSlip/dist/styles.css" rel="stylesheet" type="text/css"> <link href="BurgerSqueeze/dist/styles.css" rel="stylesheet" type="text/css">
The example HTML to create a Rotate hamburger toggle animation. All possible animation classes:
- burger-arrow
- burger-rotate
- burger-slide
- burger-slip
- burger-squeeze
<div class="burger burger-rotate"> <div class="burger-lines"></div> </div>
Change the direction of the animation.
- burger-left (default)
- burger-right
- burger-up
- burger-down
<div class="burger burger-arrow burger-down"> <div class="burger-lines"></div> </div>
Set the state to open on page load.
<div class="burger burger-rotate open"> <div class="burger-lines"></div> </div>