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 library

Add the following line, preferably inside the head section of the HTML document:

<script src="https://zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Add the menu markup

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

<div data-ui-load="@lib/components/menu_overlay"
    data-ui-context="menu-overlay">
  

    
    Menu Item 1
    Menu Item 2
    Menu Item 3
  
</div>

... and that's it, super duper easy : )

Option attributes

• data-ui-load="@lib/components/menu_overlay" constructor
  load the menu_overlay component on the element.
• data-ui-context optional
  identifier name to be used to reference 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 data-ui-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.

Theming

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 shown in this page is using a Material Design Lite theme.

HTML

  

        
        
Example Menu
        
            Settings
            
                settings
            
        
        
            Share
            
                share
            
        
        
            Add to favorite
            
                favorite
            
        
  
  
  

    
      message
    
  
  

    
      close
    
  

CSS

You can read further about zUIx templates and other features in the library documentation site.

Scripting

Event listeners

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

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

Source code

Source code is available in the lib/components folder of zKit repository.