Menu Overlay

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.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src=""></script>

2. Add the menu markup

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

<div z-load="@lib/components/menu-overlay"

<div #items>

<!-- menu items list -->
<a href="#link_1">Menu Item 1</a>
<a href="#link_2">Menu Item 2</a>
<a href="#link_3">Menu Item 3</a>



... and that's it! Super duper easy : )

Option attributes

  • z-load="@lib/components/menu-overlay" constructor
    load the menu-overlay component on the element.
  • z-context optional
    identifier name to be used to access this component from JavaScript.
  • data-o-scroller optional
    if the scrolling container it is not the main document, use this parameter to specify the value of field attribute
    assigned to the container with the scroll.
  • data-o-button-color optional
    color of the menu button. The default value is deeppink.
  • data-o-icon-color optional
    color of the menu button icon. The default value is white.
  • data-o-position optional
    sets the position of the button. It can be left, center or right. The default value is right.
  • data-o-before optional
    show only before the element with the specified field name (eg. 'footer')
  • data-o-after optional
    show only after the element with the specified field name (eg. 'header')


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

  • add
    #menu_button for the normal state button

  • close
    #menu_button_close for the open state button

For instance the example menu in this page is using Material Design Lite FAB (floating action buttons):

<div z-load="@lib/components/menu-overlay">

<div #items>

<!-- menu items list -->


<!-- custom open/close menu button -->

<div #menu_button>
<a ctrl z-load="@lib/controllers/mdl-button" z-options="toggleButton">
<i class="material-icons">message</i>

<div #menu_button_close>
<a ctrl z-load="@lib/controllers/mdl-button" z-options="toggleButton">
<i class="material-icons">close</i>

toggleButton = { type: 'fab', class: 'accent', lazyLoad: false };


Event listeners

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

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();
arrow_left  Previous
Next arrow_right 
zKit components v1.1.1
web enhancing bits