A menu overlay activated by a floating action button. The pink button in the lower right corner of this page is a sample usage. No JavaScript coding is required for a basic use.

This component is framework-agnostic, so it can be used with any UI framework or even with just plain HTML/CSS.

Usage

1. Include zUIx library

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

<script src="//genielabs.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/menu_overlay"
    data-ui-context="menu-overlay">
  
Menu Item 1 Menu Item 2 Menu Item 3
</div>

... and that's it, super duper easy : )

Option attributes

Theming

You can customize the appearance of the menu button by overriding the template fields:

For instance the example menu shown in this page is using a Material Design Lite theme.

HTML
CSS

You can read further about zUIx templates and other features in the library documentation site.

Scripting

Event listeners

var menuOverlay;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('menu-overlay', function () {
    // add event listeners
    this.on('open', function() { /* ... */})
        .on('close', function() { /* ... */});
    // store a global reference of the
    // component for eventual later use
    menuOverlay = this;
});

Programmatically show/hide

// show the menu (enable)
menuOverlay.hide();
// hide the menu (disable)
menuOverlay.hide();
// show the menu button
menuOverlay.showButton();
// hide the menu button
menuOverlay.hideButton();

Source code

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