Basic Dynamic Popup Menu In jQuery - Popmenu.js

Popmenu.js is a small and cross-browser jQuery plugin to create a custom dynamic popup menu that can be attached to any DOM elements within the document.

Perfect for a custom context menu to replace the native browser right click menu. The popup menu will auto dismiss on click outside, window resize or the current browser tab loses focus.

How to use it:

1. Insert the JavaScript popmenu.js and Stylesheet popmenu.css into the document. Note that the JavaScript file must be loaded after jQuery:

<link rel="stylesheet" href="./popmenu.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="./popmenu.js"></script>

2. Define the menu items in a JavaScript object as follows:

var items = {
    home : {
      name : 'Home', 
      icon : 'icon class(es) here', 
      divid : true // shows a divider
    },
    about : {
      name : 'About', 
      icon : 'icon class(es) here'
    },
    contact : {
      name : 'Contact', 
      icon : 'icon class(es) here'
    }
}

3. Handle the item click events.

var myCallback = function(item){
    var id = $(item).attr('id');
    if(id === "home") {
      alert("Home");
    }else if(id === "about") {
      alert("About");
    }else if(id ==="contact") {
      alert("Contact");
    }
}

4. Attach the popup menu to an element. That's it.

$(document).on("contextmenu",function(e){
  popmenu({
    items : items
    callback: myCallback
});
  return false;
});

5. Customize the position of the popup menu.

$(document).on("contextmenu",function(e){
  popmenu({
    items: items
    callback: myCallback,
    x: 100,
    y: 200
});
  return false;
});

Changelog:

2020-04-24

• JS Updated

---

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