HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>custom context menu</title>
  <style>
    body { font-family: sans-serif; padding: 16px; margin: 0; }
    #panel {
      padding: 40px;
      background: #e0e7ff;
      border: 2px dashed #6366f1;
      border-radius: 8px;
      cursor: context-menu;
      user-select: none;
    }
    #custom-menu {
      display: none;
      position: absolute;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      min-width: 140px;
      z-index: 100;
    }
    #custom-menu button {
      display: block;
      width: 100%;
      padding: 10px 14px;
      border: none;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }
    #custom-menu button:hover { background: #f1f5f9; }
    #log { margin-top: 12px; color: #4338ca; font-weight: bold; }
  </style>
</head>
<body>
  <div id="panel">Right-click inside this panel for a custom menu.</div>
  <div id="custom-menu">
    <button type="button" data-action="copy">Copy</button>
    <button type="button" data-action="paste">Paste</button>
    <button type="button" data-action="delete">Delete</button>
  </div>
  <div id="log">Waiting for right-click…</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var $menu = $("#custom-menu");

    $("#panel").on("contextmenu", function(event) {
      event.preventDefault();
      $menu.css({ left: event.pageX, top: event.pageY }).show();
      $("#log").text("Custom menu at " + event.pageX + ", " + event.pageY);
    });

    $(document).on("click", function() {
      $menu.hide();
    });

    $menu.on("click", "button", function() {
      $("#log").text("Action: " + $(this).data("action"));
      $menu.hide();
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery contextmenu event — custom menu with preventDefault (Try It)