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.

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 context menu `div` markup

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

<div data-ui-load="@lib/components/context_menu"
     data-ui-context="my-menu">
  

    
    Option 1
    Option 2
    Option 3
  
</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

• data-ui-load="@lib/components/context_menu" constructor
  load the context_menu component on the element.
• data-ui-context optional
  identifier name to be used to reference this component from JavaScript.

Scripting

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
  this
    .on('open', function() { /* ... */})
    .on('close', function() { /* ... */});
  // store a global reference of
  // the component for later use
  contextMenu = this;
});

Programmatically show/hide

// show the menu
contextMenu.show();
// hide the menu
contextMenu.hide();

Source code

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