mburger

A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin. Click a hamburger to see the animation. More info here.

collapse

spin

squeeze

tornado

<html>
   <head>
      <style type="text/css" rel="stylesheet" href="dist/mburger.css">
   </heady>
   <body>
      <button class="mburger mburger--spin" href="#my-menu">
         <b</b>
         <b</b>
         <b</b>
      </button>
   </body>
</html>

Customize the hamburger

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.

For more examples and the full documentation, please visit: mmenujs.com/mburger.

Native webcomponent

Note that -at the time of writing (early 2019)- the native webcomponent is only (fully) supported in Chrome.

collapse

spin

<html>
   <head>
      <script type="module" src="dist/mburger.js"></script>
   </heady>
   <body>
      <m-burger fx="spin" menu="my-menu"></m-burger>
   </body>
</html>