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 themenu-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 isdeeppink
.data-o-icon-color
optional
color of the menu button icon. The default value iswhite
.data-o-position
optional
sets the position of the button. It can beleft
,center
orright
. The default value isright
.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:
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();