Custom right-click menu to an image

Submit By webmaster 7 months ago in javascript category
Tags: menubootstrap-5
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.
Preview HTML CSS JavaScript Resources
<section class="mt-5"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <img src="https://via.placeholder.com/400x200" alt="dummy image" class="open-right-menu" /> </div> </div> <div class="row mt-5"> <div class="col-md-6 offset-md-3"> <div class="open-right-menu div-box"> <h1 class="p-3">Right click on this box</h1> </div> </div> </div> </div> </section> <div class="right-menu-box"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Menu item 1</a> <a href="#" class="list-group-item list-group-item-action">Menu item 2</a> <a href="#" class="list-group-item list-group-item-action">Menu item 3</a> <a href="#" class="list-group-item list-group-item-action">Menu item 4</a> <a href="#" class="list-group-item list-group-item-action">Menu item 5</a> </div> </div>
.div-box{ width: 400px; background: #000; height: 200px; color:#fff; } .right-menu-box{ position: absolute; display: none; } .list-group-item { background-color: #90caf9; }
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.

Add New Snippet