Source Code:
(back to article)
Submit
Result:
Report an issue
<div id="contextArea" style="width: 300px; height: 200px; background-color: #f0f0f0; margin-bottom: 10px;"> Right-click on me </div> <ul id="customMenu" style="display: none; list-style: none; padding: 10px; background-color: white; border: 1px solid black; position: absolute;"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> <script> document.getElementById('contextArea').addEventListener('contextmenu', function(event) { event.preventDefault(); // Prevent the default context menu var menu = document.getElementById('customMenu'); menu.style.display = 'block'; menu.style.left = event.pageX + 'px'; menu.style.top = event.pageY + 'px'; }); document.addEventListener('click', function(event) { document.getElementById('customMenu').style.display = 'none'; }); </script>