Animated context menu component that does not require JavaScript coding for a basic use. This component is framework-agnostic, it will play nicely in combination with any UI framework.
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 context menu div
markup
Put inside the field menu
the code of your menu items.
<div z-load="@lib/components/context-menu"
z-context="my-menu">
<div #menu>
<!-- menu items list -->
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
</div>
The context menu already provides basic styling for the button
element, though you can use any kind of element and custom styling.
Option attributes
z-load="@lib/components/context-menu"
constructor
load thecontext-menu
component on the element.z-context
optional
identifier name to be used to access this component from JavaScript.
Scripting
Event listeners
var contextMenu;
zuix.context('my-menu', (menu) => {
menu.on({
open: function() { /* ... */ },
close: function() { /* ... */ }
});
// store a global reference of
// the component for later use
contextMenu = menu;
});
Programmatically show/hide
// show the menu
contextMenu.show();
// hide the menu
contextMenu.hide();