Hamburgers introduction

Check out this collection of animated hamburgers. All set up to work out of the box with the mmenu.js plugin. Click a hamburger to see the animation (and make sure the menu on the left is closed).

collapse
spin
squeeze
tornado

Download

The mburger.css and mburger.js files are licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.

NPM

Install with NPM:
npm install mburger-css

GitHub

Download directly from the Github repository.

How to use

There are two ways to get an animated hamburger on your webpage: With plain good ol' HTML and CSS, or with a new and fancy native webcomponent. Note that -at the time of writing (early 2019)- a native webcomponent is only (fully) supported in Chrome.

First, include the mburger file in your webpage.

Using HTML and CSS
<link href="path/to/mburger.css" rel="stylesheet" />
Using the webcomponent
<script type="module" src="path/to/mburger.js"></script>

Next, add the markup to the HTML.

Using HTML and CSS
<a href="#my-menu" class="mburger">
   <b></b>
   <b></b>
   <b></b>
</a>
Using the webcomponent
<m-burger menu="my-menu"></m-burger>

If the href attribute (when using HTML and CSS) or the menu attribute (for the webcomponent) targets a menu created with the mmenu.js plugin, the menu will automatically open when the hamburger is clicked.

Accessibility

When using HTML and CSS, you could use a <button class="mburger" /> for a better accessibility. Target the menu in the aria-controls attribute.

<button aria-controls="my-menu" class="mburger">
   <b></b>
   <b></b>
   <b></b>
</button>
The animation

The default animation is pretty basic. For a more enjoyable animation, add the preferred animation name to the class attribute (when using HTML and CSS) or the fx attribute (for the webcomponent).

Using HTML and CSS
<a href="#my-menu" class="mburger mburger--collapse">
   <b></b>
   <b></b>
   <b></b>
</a>
Using the webcomponent
<m-burger menu="my-menu" fx="collapse"></m-burger>

The available animations: collapse, spin, squeeze and tornado.

Add text

To add text when using HTML and CSS, add the text inside a <span />. For the webcomponent, just add the text.

Using HTML and CSS
<a href="#my-menu" class="mburger">
   <b></b>
   <b></b>
   <b></b>
   <span>Menu</span>
</a>
Using the webcomponent
<m-burger menu="my-menu">
   Menu
</m-burger>
Fixed or sticky

If you need your hamburger icon to be fixed or sticky, try wrapping it in a <div class="Fixed" /> or <div class="Sticky" /> and use the fixedElements add-on.

Using HTML and CSS
<div class="Sticky">
   <a href="#my-menu" class="mburger">
      <b></b>
      <b></b>
      <b></b>
   </a>
</div>
Using the webcomponent
<div class="Sticky">
   <m-burger menu="my-menu"></m-burger>
</div>

CSS & variables

By default, the hamburger adopts to its environment pretty good, the bars scale to fit and inherit their color for the parent element.

The hamburger is pretty easy to customize too, just override some of the CSS values and variables.

Using HTML and CSS
<style>
   .mburger {
      width: 80px;
      height: 80px;
      --mb-bar-height: 2px;
   }
</style>
Using the webcomponent
<style>
   m-burger {
      width: 80px;
      height: 80px;
      --mb-bar-height: 2px;
   }
</style>

Available CSS values and variables

Variables Datatype Default value Description
Values
background-color CSS value transparent The background-color for the button.
border CSS value none Add a border around the button.
border-radius CSS value 0 Gives the button rounded corners, use 100% to turn the square into a circle.
color CSS value inherit The color for the bars.
height CSS value 60px The height for the button.
width CSS value 60px The width for the button.
Variables
--mb-button-size CSS value 60px Width and height for the button.
--mb-bar-width float 0.6 Width for the bars as a float (0 = 0%, 1 = 100%), relative to the button (the bars are horizontally centered).
--mb-bar-height CSS value 4px Height for the bars (the bars are vertically centered).
--mb-bar-spacing CSS value 10px Distance between bars (approximately).
--mb-animate-timeout CSS value 0.4s Timeout before starting the animation, ensures the animation starts after the menu is fully opened.