Customizable Right-click Popup Menu Plugin With jQuery - popmenu.js

popmenu.js is a jQuery plugin used to create animated, themeable, and highly customizable right click context menu appending to any elements. Not only for desktop users, PopMenu can also provide context menu for mobile users with touch screen by long-tapping.

How to use it:

1. Using PopMenu is easy. But before we begin, PopMenu requires several JS and CSS files to work. Therefore, load the following files in the HEAD section of the page.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.popmenu.js"></script>
<link rel="stylesheet" href="css/jquery.popmenu.css">
<link rel="stylesheet" href="css/jquery.popmenu.icons.css">

2. Once the files are loaded, we could assign PopMenu to any HTML elements. Let's say we want to assign a context menu to a button. To assign a separator, add an item without label. Each menu item consists of an ID and options. Please note that the ID of all menu items, including submenu items in a single context menu group must be unique.

<input type="button" id="MyButton" value="Right Click Here">

$(function() {
  $('#MyButton').popmenu({
    itemId1: {label: 'Item One', action: eventHandler},
    separator: {},
    itemId2: {label: 'Item Two', action: eventHandler},
  });
});

function eventHandler() { 
  /* Function to be executed when an item is selected */ 
}

3. Calling $(elm).popmenu() without any parameters will return you an instance of PopMenu object. With this object, you could add, remove, and access menu items. Each menu item is an instance of PopMenuItem. Consult these two classes for more information regarding available methods and options.

// To access PopMenu instance
$(elm).popmenu();

// To access menu item
$(elm).popmenu().find('item_id');

// To add a new item
$(elm).popmenu().append('item_id', {label: 'Item Label'});

// To remove an item
$(elm).popmenu().remove('item_id');

4. Default options for PopMenu. Refer to /docs/index.html for a complete user guide and API reference.

$(elm).popmenu({

  // fade | slide | none | default
  effect: 'fade',

  // Transition duration in ms if an effect is not 'none'. 
  // If set to null, duration set to the assigned context menu will be used.
  duration: 200,

  // A flag determining whether this PopMenu is a top level menu or a sub-menu. 
  contextMenu: false,

  tmpFx: undefined,

  /*
    PopMenu.direction = {
      RIGHT: 2,
      LEFT: 0,
      TOP: 0,
      BOTTOM: 1,
      HORIZONTAL: 2,
      VERTICAL: 1,
      RIGHT_BOTTOM: 3,
      RIGHT_TOP: 2,
      LEFT_BOTTOM: 1,
      LEFT_TOP: 0
    };
  */
  direction: PopMenu.direction.RIGHT_BOTTOM,

  scrollerSize: 24
  
})

Changelog:

2018-06-09

• JS & CSS update

---

This awesome jQuery plugin is developed by fujaru. For more Advanced Usages, please check the demo page or visit the official website.