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();