Android's Material Design hamburger animation built in CSS (with a sprinkle of JS).

See this pen for a styled example.

Currently supporting the 2 latest versions of each major browser (IE10+) with the aim to support IE8+ in the future.

Download the latest release.

Include the CSS & JS files from the dist folder where desired within your project.

Add the following HTML elements.

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

Install the package (use --save or --save-dev if required).

npm install material-design-hamburger

Include the CSS & JS where required.

<link rel="stylesheet" href="./node_modules/material-design-hamburger/dist/material-design-hamburger.css">

<script src="./node_modules/material-design-hamburger/dist/material-design-hamburger.js"></script>

<script>materialDesignHamburger()</script>

Add the following HTML elements.

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

Install the package (use --save or --save-dev if required).

bower install material-design-hamburger --save-dev

Include the CSS & JS where required.

<link rel="stylesheet" href="./bower_components/material-design-hamburger/dist/material-design-hamburger.css">

<script src="./bower_components/material-design-hamburger/dist/material-design-hamburger.js"></script>

<script>materialDesignHamburger()</script>

Add the following HTML elements.

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

All contributions, no matter how big or small, are welcome. Follow these steps to contribute.

• Clone the repository

git clone [email protected]:swirlycheetah/material-design-hamburger.git && cd material-design-hamburger

• Install the required dependencies

npm install

• Make amendments in the src folder followed by running gulp build (or ./node_modules/gulp/bin/gulp.js build) to build the changes in the dist folder

• Ensure there are no lint errors

• Ensure the example in the examples/basic-example folder still works as required

• Push your changes and submit a pull request

• APK Mirror (only at viewport widths smaller than 993px)

• Better browser support
• Unit tests
• More examples
• Easier customisation

Released under the MIT license: opensource.org/licenses/MIT