Context Menu

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.

Example

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

Example

 
Next arrow_right 
extension
zKit components v1.1.1
web enhancing bits