Create a Custom Context Menu

document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.getElementById('myTargetElement');
  let contextMenu = null;

  function createContextMenu(x, y) {
    if (contextMenu) contextMenu.remove(); // Remove existing menu

    contextMenu = document.createElement('div');
    contextMenu.className = 'custom-context-menu';
    contextMenu.style.position = 'fixed';
    contextMenu.style.top = `${y}px`;
    contextMenu.style.left = `${x}px`;
    contextMenu.style.backgroundColor = '#fff';
    contextMenu.style.border = '1px solid #ccc';
    contextMenu.style.boxShadow = '2px 2px 5px rgba(0,0,0,0.2)';
    contextMenu.style.padding = '5px 0';
    contextMenu.style.zIndex = '1000';

    const items = ['Option 1', 'Option 2', 'Option 3'];
    items.forEach(itemText => {
      const menuItem = document.createElement('div');
      menuItem.className = 'context-menu-item';
      menuItem.style.padding = '8px 15px';
      menuItem.style.cursor = 'pointer';
      menuItem.style.whiteSpace = 'nowrap';
      menuItem.textContent = itemText;
      menuItem.addEventListener('mouseenter', () => menuItem.style.backgroundColor = '#f0f0f0');
      menuItem.addEventListener('mouseleave', () => menuItem.style.backgroundColor = '');
      menuItem.addEventListener('click', () => {
        alert(`Clicked: ${itemText}`);
        contextMenu.remove();
        contextMenu = null;
      });
      contextMenu.appendChild(menuItem);
    });

    document.body.appendChild(contextMenu);
  }

  targetElement.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // Prevent default browser context menu
    createContextMenu(e.clientX, e.clientY);
  });

  // Close context menu if clicked anywhere else
  document.addEventListener('click', (e) => {
    if (contextMenu && !contextMenu.contains(e.target)) {
      contextMenu.remove();
      contextMenu = null;
    }
  });
});
/*
HTML structure example:
<style>
  #myTargetElement {
    width: 300px;
    height: 200px;
    border: 2px dashed purple;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    user-select: none;
    margin: 20px;
  }
</style>
<div id="myTargetElement">Right-click me for a custom menu</div>
*/