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.


1. Include zUIx library

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

<script src="//"></script>

2. Add the context menu `div` markup

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

<div data-ui-load="@lib/components/context_menu"

The context menu already provides basic styling for the `button` element, though you can use any kind of element and custom styling.

Option attributes


Event listeners

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

Programmatically show/hide

// show the menu;
// hide the menu

Source code

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