8 Hamburger Toggle Animations In Pure HTML/CSS

Category: Animation , CSS & CSS3 , Recommended | January 31, 2019
Author: march08
Views Total: 722
Official Page: Go to website
Last Update: January 31, 2019
License: MIT

Preview:

8 Hamburger Toggle Animations In Pure HTML/CSS

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:

  1. SQUEEZE
  2. SLIDE
  3. SLIP
  4. ROTATE
  5. ARROW
  6. ARROW RIGHT
  7. ARROW UP
  8. 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>

You Might Be Interested In:


Leave a Reply