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

<script type="module">
  import "https://zuixjs.github.io/zkit/lib/1.2/components/menu-overlay.module.js";
</script>

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

</menu-overlay>

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

<div z-load="https://zuixjs.github.io/zkit/lib/1.2/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>

Option attributes

• z-context="<context_id>" optional
  identifier name to be used to access this component from JavaScript.
• :on:<event_name>="<handler>" optional
  set handler function for event <event_name>
• :scroller="'<field_id>'" 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.
• :button-color="'<color>'" optional
  color of the menu button. The default value is deeppink.
• :icon-color="'<color>'" optional
  color of the menu button icon. The default value is white.
• :position="'<position>'" optional
  sets the position of the button. It can be left, center or right. The default value is right.
• :before="'<field_id>'" optional
  show only before the element with the specified field name (eg. 'footer')
• :after="'<field_id>'" optional
  show only after the element with the specified field name (eg. 'header')

Events

• open - occurs when the menu opens
• close - occurs when the menu is closed

Customizing button

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

<menu-overlay>

  <div #items>

        <!-- menu items list -->

  </div>

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

  <template #menu_button>

    <mdl-button :type="'fab'" :class="'primary'">
      add
    </mdl-button>

  </template>

  <template #menu_button_close>

    <mdl-button :type="'fab'" :class="'primary'">
      remove
    </mdl-button>

  </template>

</menu-overlay>

Scripting

Get a reference to the component instance:

zuix.context('menu-overlay', (mo) => {
  // store a global reference for later use
  self.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();