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.


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/menu_overlay"
Menu Item 1 Menu Item 2 Menu Item 3

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

Option attributes


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.


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


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
    .on('open', function() { /* ... */})
    .on('close', function() { /* ... */});
  // store a global reference of
  // the component for later use
  menuOverlay = this;

Programmatically show/hide

// show the menu (enable)
// hide the menu (disable)
// show the menu button
// hide the menu button
// whether the button is showing or not
buttonShowing = menuOverlay.showing();

Source code

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