/material-design-hamburger

Android's Material Design hamburger animation built in CSS

Primary LanguageCSS

Material Design Hamburger

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

Material Design Hamburger

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>

Contributing

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

  • Clone the repository

git clone git@github.com: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

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