This is an Hamburger Icon component created out of Jonathan Suh's Tasty CSS Hamburgers.

To see an example touch the hamburger icon in the upper right corner or these ones below.

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="//zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Add the menu markup

Put inside the field items the code for your menu items.

<div data-ui-load="@lib/components/hamburger_icon"
     data-ui-context="hamburger-icon"></div>

Option attributes

Scripting

Event listeners

var hamburgerIcon;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('hamburger-icon', function() {
  // add event listeners
  this.on('menu:open', function() {
    // things to do when the hamburger is open
  }).on('menu:close', function() {
    // things to do when the hamburger is closed
  });
  // store a global reference of
  // the component for later use
  hamburgerIcon = this;
});

Programmatically open/close

// open
hamburgerIcon.open();
// close
hamburgerIcon.close();

Source code

Source code is available in the lib/components folder of zKit repository.