Material Design Hamburger

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

Example Usage

See this pen for a styled example.

Browser Support

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

Installation & Usage

Download

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>

npm

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>

Bower

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>

In The Wild

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

Roadmap

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

License

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