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: If you want to run these examples locally, you need to run them through a local web server. Otherwise the <script type="module"> will be blocked by CORS policy.

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>