Hamburger Icon

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="https://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

• data-ui-load="@lib/components/menu_overlay" constructor
  load the menu_overlay component on the element.
• data-ui-context optional
  identifier name to be used to reference this component from JavaScript.
• data-o-type optional
  set the type of icon animation to show. Default value is spin. See the list below for all possible values.

    3dx
    3dy
    3dxy
    arrow
    arrowalt
    arrowturn
    boring
    collapse
    elastic
    emphatic
    minus
    slider
    spring
    stand
    spin
    squeeze
    vortex

  Add -r suffix to reverse the direction of the animation (eg. spin-r).
• data-o-color optional
  set the color. Default value is #000 (black).

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.