MojoDK MojoDK - 3 months ago 35
jQuery Question

Use Bootstrap 3 dropdown menu as context menu

Using Bootstrap 3, how can I place the dropdown menu at the cursor and open it from code?

I need to use it on a table as a context menu for its rows.


It is possible. I made you a working demo to give a good start.

Working demo (Right click on any table row to see it in action)

First create your dropdown menu, hide it and change its position to absolute:

#contextMenu {
  position: absolute;

Then bind a contextmenu event to your table rows so it shows dropdown/context menu and position it at the cursor:

var $contextMenu = $("#contextMenu");

$("body").on("contextmenu", "table tr", function(e) {
      display: "block",
      left: e.pageX,
      top: e.pageY
   return false;

Then when user select an option hide dropdown/context menu:

$contextMenu.on("click", "a", function() {