[Edit]

JavaScript - create custom context menu

1 contributors

2 contributions

0 discussions

3 points

Created by:

Lani-Skinner

748

In this article, we would like to show you how to create a custom context menu using JavaScript.

Custom context menu created with JavaScript.

There are two important things while creating a custom context menu:

position - we want the context menu to appear next to the mouse cursor on right-click event,
visibility - by default it needs to be invisible and appear only when we right-click in a specified scope.

Practical example

Edit

In this example, we create a custom context menu that appears on contextmenu event when we right-click the body element.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    body {
        border: 1px solid #28a745;
        border-radius: 3px;
        height: 200px;
        padding: 10px;
    }
​
    div.context-menu {
        padding: 2px;
        position: fixed;  /*  <----- required   */
        background: #ebebeb;
        z-index: 1000;  /*  <------- required   */
    }
​
    div.context-menu.hidden {
        display: none;  /*  <------- required   */
    }
    
    div.context-menu.visible {
        display: block;  /*  <------ required   */
        z-index: 999999;
    }
​
    div.context-menu div.item {
        padding: 6px 10px;
    }
    
    div.context-menu div.item:hover {
        background: #d9d9d9;
    }
​
  </style>
</head>
<body>
  <div>Right click here to open custom context menu.</div>
  <div id="context-menu" class="context-menu hidden">
    <div class="item" onclick="console.log('item1 clicked')">Menu item 1</div>
    <div class="item" onclick="console.log('item2 clicked')">Menu item 2</div>
    <div class="item" onclick="console.log('item3 clicked')">Menu item 3</div>
  </div>
  <script>
​
    var contextMenu = document.querySelector('#context-menu');
​
    document.addEventListener('contextmenu', function(event) {
        // prevent opening default context-menu
        event.preventDefault();
​
        // set contextMenu position
        contextMenu.style.top = event.clientY + 'px';
        contextMenu.style.left = event.clientX + 'px';
​
        // make context-menu visible
        contextMenu.classList.replace('hidden', 'visible');
    });
​
    document.addEventListener('mouseup', function(event) {
        // make context-menu hidden
        contextMenu.classList.replace('visible', 'hidden');
    });
    
  </script>
</body>
</html>