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. Import menu-overlay module

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

2. Add component to the page

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

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@1.1.29/js/zuix.min.js"></script>

2. Add the menu markup

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

<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();
arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits