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.

Usage

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="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Add the menu markup

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

<div z-load="@lib/components/menu-overlay"
z-context="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>

</div>

</div>

... 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')

Customizing

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 -->

</div>

<!-- 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>
</a>
</div>

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

</div>
<script>
toggleButton = { type: 'fab', class: 'accent', lazyLoad: false };
</script>

Scripting

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

Programmatically show/hide

// show the menu (enable)
menuOverlay.show();
// hide the menu (disable)
menuOverlay.hide();
// show the menu button
menuOverlay.showButton();
// hide the menu button
menuOverlay.hideButton();
// whether the button is showing or not
buttonShowing = menuOverlay.showing();
arrow_left  Previous
Next arrow_right 
extension
zKit components v1.1.1
web enhancing bits