Custom right-click menu to an image. You can add right-click custom menu in an image or any div or any other element. Add the "open-right-menu" class in any element and open the context menu.
var rightMenu = document.querySelector('.right-menu-box');
document.querySelectorAll('.open-right-menu').forEach(function (elem){
elem.addEventListener('contextmenu', function(e) {
var x = e.x || e.clientX;
var y = e.y || e.clientY;
rightMenu.style.display= 'block';
rightMenu.style.top= y+'px';
rightMenu.style.left= x+'px';
e.preventDefault();
e.stopPropagation();
});
}, false);
document.querySelector('body').addEventListener('click', function(e) {
rightMenu.style.display= 'none'; //Hide on outside click
});
document.addEventListener('contextmenu', function(e) {
rightMenu.style.display= 'none'; //Hide on outside click
}, false);
Bootstrap = 5.1.3
Download Custom right-click menu to an image snippet code.
This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project.
You can modify the above editor code and see the live update. You can also download the modify code.
Feel free to play with Custom right-click menu to an image snippet code.
If you like it then don't forget to share this code with your friends.
Free code snippet playground
Let's share the example by using HTML, CSS, JavaScript and Bootstrap.