<ul class="menu">
<li><a id="apagar" href="#">Apagar</a></li>
<li><a id="editar" href="#">Editar</a></li>
<li><a id="ocultar" href="#">Ocultar</a></li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
display: none;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
JS:
var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
window.event.returnValue = false;
});
}`insira o código aqui`
var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
window.event.returnValue = false;
});
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
display: none;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Clique com o botão direito </p>
<ul class="menu">
<li><a id="apagar" href="#">Apagar</a></li>
<li><a id="editar" href="#">Editar</a></li>
<li><a id="ocultar" href="#">Ocultar</a></li>
</ul>