Material Design Hamburger Animation with JS and CSS3

Category: Animation , Javascript | October 22, 2014
Author: swirlycheetah
Views Total: 3,896
Official Page: Go to website
Last Update: October 22, 2014
License: MIT

Preview:

Material Design Hamburger Animation with JS and CSS3

Description:

Material Design inspired hamburger animation which allows you to create an interactive & animated toggle icon, written in CSS3 and a little JavaScript magic.

How to use it:

Include the material-design-hamburger.css in the header and the material-design-hamburger.js at the bottom.

<link rel="stylesheet" href="material-design-hamburger.css">
<script src="material-design-hamburger.js"></script>

Build the Html structure for the hamburger icons.

<section class="material-design-hamburger">
  <button class="material-design-hamburger__icon">
    <span class="material-design-hamburger__layer"></span> 
  </button>
</section>

Done. Change & override the CSS styles whatever you like to your taste.

You Might Be Interested In:


2 thoughts on “Material Design Hamburger Animation with JS and CSS3

Leave a Reply