Hamburger Menu Animations with CSS3

Looking to add unique kind of hamburger menu animation with CSS3 only? This small plugin helps you to quickly add it. it is a plain HTML/CSS plugin which comes up with 8 different animations.

These hamburger buttons are mobile and desktop friendly. It also easy to customize by edit the few lines of CSS file.

It included the slide, slip, rotate and arrow effects. let’s have a look the complete list of available animations:

Available Hamburger Animation

1. SQUEEZE
2. SLIDE
3. SLIP
4. ROTATE
5. ARROW
6. ARROW RIGHT
7. ARROW UP
8. ARROW DOWN

Create Hamburger Menu With CSS3 Only

It’s easy to load an animation of your choice in the document. All you need to follow few simple steps. To keep your site website lightweight, You should only import what you need.

Each effect comes with a different stylesheet so you only need to include what you like.

<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">

There are possible 5 different classes to create a Rotate hamburger toggle animations. here are these classes.

• burger-arrow
• burger-rotate
• burger-slide
• burger-slip
• burger-squeeze

If we talk about the HTML, you will see it is also simple and all you need to define the class burger for its main div and to get the animation you need to add the class according to your choice. In our case, we added the burger-rotate class.

Next, to create the burger lines menu icon, you simply need to add another child div and add the burger-lines class inside it.

<div class="burger burger-rotate">
  <div class="burger-lines"></div>
</div>

If you want to change the direction of the burger animation then here are four supported classes to handle it.

• burger-left (default)
• burger-right
• burger-up
• burger-down

Now if you want to implement one of the direction class, You simply need to add it to the main primary div. Have a look example below of an HTML code and see we have added the burger-down class to get the down animation effect.

<div class="burger burger-arrow burger-down">
  <div class="burger-lines"></div>
</div>

The plugin also included one of awesome function that is, You can set the state to open the Hamburger menu on the page load. And to get this effect you need to add the class open in the main div.

<div class="burger burger-rotate open">
  <div class="burger-lines"></div>
</div>