Skip to main content
adicionou 351 caracteres ao conteúdo
Fonte Link
Leonardo
  • 9,4mil
  • 11
  • 74
  • 132
<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>

<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>

Fonte Link

<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`