Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Android's Material Design hamburger animation built in CSS

Resources

Stars

Watchers

Forks

Packages

No packages published