EN
JavaScript - create custom context menu
3 points
In this article, we would like to show you how to create a custom context menu using 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.
In this example, we create a custom context menu that appears on contextmenu
event when we right-click the body element.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
border: 1px solid #28a745;
8
border-radius: 3px;
9
height: 200px;
10
padding: 10px;
11
}
12
13
div.context-menu {
14
padding: 2px;
15
position: fixed; /* <----- required */
16
background: #ebebeb;
17
z-index: 1000; /* <------- required */
18
}
19
20
div.context-menu.hidden {
21
display: none; /* <------- required */
22
}
23
24
div.context-menu.visible {
25
display: block; /* <------ required */
26
z-index: 999999;
27
}
28
29
div.context-menu div.item {
30
padding: 6px 10px;
31
}
32
33
div.context-menu div.item:hover {
34
background: #d9d9d9;
35
}
36
37
</style>
38
</head>
39
<body>
40
<div>Right click here to open custom context menu.</div>
41
<div id="context-menu" class="context-menu hidden">
42
<div class="item" onclick="console.log('item1 clicked')">Menu item 1</div>
43
<div class="item" onclick="console.log('item2 clicked')">Menu item 2</div>
44
<div class="item" onclick="console.log('item3 clicked')">Menu item 3</div>
45
</div>
46
<script>
47
48
var contextMenu = document.querySelector('#context-menu');
49
50
document.addEventListener('contextmenu', function(event) {
51
// prevent opening default context-menu
52
event.preventDefault();
53
54
// set contextMenu position
55
contextMenu.style.top = event.clientY + 'px';
56
contextMenu.style.left = event.clientX + 'px';
57
58
// make context-menu visible
59
contextMenu.classList.replace('hidden', 'visible');
60
});
61
62
document.addEventListener('mouseup', function(event) {
63
// make context-menu hidden
64
contextMenu.classList.replace('visible', 'hidden');
65
});
66
67
</script>
68
</body>
69
</html>