[javascript] Making custom right-click context menus for my web-app

var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();  
            menu.style.position = 'absolute';
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';        
             menu.style.opacity = 1;
        });
       
  document.addEventListener("click", function(e){
  if(e.target.closest('.context_menu'))
  return;
      menu.style.opacity = 0;
  });

.context_menu{

width:70px;
background:lightgrey;
padding:5px;
 opacity :0;
}
.context_menu div{
margin:5px;
background:grey;

}
.context_menu div:hover{
margin:5px;
background:red;
   cursor:pointer;

}

<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
</div>

var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();  
            menu.style.position = 'absolute';
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';        
             menu.style.opacity = 1;
        });
       
  document.addEventListener("click", function(e){
  if(e.target.closest('.context_menu'))
  return;
      menu.style.opacity = 0;
  });

.context_menu{

width:120px;
background:white;
border:1px solid lightgrey;

 opacity :0;
}
.context_menu div{
padding:5px;
padding-left:15px;
margin:5px 2px;
border-bottom:1px solid lightgrey;
}
.context_menu div:last-child {
border:none;
}
.context_menu div:hover{

background:lightgrey;
   cursor:pointer;

}

<div class="context_menu">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to jquery

• How to make a variable accessible outside a function? • Jquery assiging class to th in a table • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Getting all files in directory with ajax • Bootstrap 4 multiselect dropdown • Cross-Origin Read Blocking (CORB) • bootstrap 4 file input doesn't show the file name • Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource • how to remove json object key and value.?

Examples related to jquery-plugins

• How to use a jQuery plugin inside Vue • How add spaces between Slick carousel item • Bootstrap carousel multiple frames at once • Can someone explain how to implement the jQuery File Upload plugin? • Correct way to integrate jQuery plugins in AngularJS • Call Jquery function • Twitter bootstrap remote modal shows same content every time • Jquery Chosen plugin - dynamically populate list by Ajax • How to show all rows by default in JQuery DataTable • Change Placeholder Text using jQuery

Examples related to contextmenu

• How to add a "open git-bash here..." context menu to the windows explorer? • Android: How to enable/disable option menu item on button click? • How to add a custom right-click menu to a webpage? • Making custom right-click context menus for my web-app • Right click to select a row in a Datagridview and show a menu to delete it • right click context menu for datagridview • How do I create a right click context menu in Java Swing? • How to disable right-click context-menu in JavaScript

Examples related to right-click

• Adding a right click menu to an item • How to add a custom right-click menu to a webpage? • Java Mouse Event Right Click • Making custom right-click context menus for my web-app • How to disable mouse right click on a web page? • Right click to select a row in a Datagridview and show a menu to delete it • right click context menu for datagridview • How to distinguish between left and right mouse click with jQuery