Eu sei que essa pergunta é muito antiga, mas eu só vim com o mesmo problema e resolvi, então estou respondendo caso alguém encontre isso no google como eu. Baseei minha solução na de Andrew, mas basicamente modifiquei tudo depois.
EDIT : vendo quão popular isso tem sido ultimamente, decidi atualizar também os estilos para torná-lo mais parecido com 2014 e menos com o Windows 95. Corrigi os bugs @Quantico e @Trengot detectados, agora é uma resposta mais sólida.
EDIT 2 : Eu o configurei com o StackSnippets, pois eles são um novo recurso muito interessante. Deixo o bom jsfiddle aqui para referência (clique no quarto painel para vê-los funcionar).
Novo fragmento de pilha:
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me
Nota: você pode ver alguns pequenos bugs (menu suspenso longe do cursor etc.), verifique se ele funciona no jsfiddle , pois é mais parecido com a sua página da Web do que o StackSnippets.
Francisco Presencia
fonte
Como Adrian disse, os plugins funcionarão da mesma maneira. Você precisará de três partes básicas:
1: Manipulador de
'contextmenu'eventos para evento:Aqui, você pode vincular o manipulador de eventos a qualquer seletor para o qual deseja mostrar um menu. Eu escolhi o documento inteiro.
2: Manipulador de
'click'eventos para evento (para fechar o menu personalizado):3: CSS para controlar a posição do menu:
O importante com o CSS é incluir o
z-indexeposition: absoluteNão seria muito difícil envolver tudo isso em um plugin jQuery.
Você pode ver uma demonstração simples aqui: http://jsfiddle.net/andrewwhitaker/fELma/
fonte
event.targetdentro da ligação de clique nodocument. Se não estiver dentro do menu de contexto, oculte o menu: jsfiddle.net/fELma/286 #fonte
Aqui está um exemplo para o menu de contexto do botão direito em javascript: Menu de contexto do botão direito
Utilizou o código javasScript bruto para a funcionalidade do menu de contexto. Você pode verificar isso, espero que isso ajude você.
Código ao vivo:
fonte
O menu de contexto do navegador está sendo substituído. Não há como aumentar o menu de contexto nativo em qualquer navegador principal.
Como o plug-in está criando seu próprio menu, a única parte que realmente está sendo abstraída é o evento do menu de contexto do navegador. O plug-in cria um menu html com base na sua configuração e coloca esse conteúdo no local do seu clique.
Sim, esta é a única maneira de criar um menu de contexto personalizado. Obviamente, plugins diferentes fazem coisas ligeiramente diferentes, mas todos substituem o evento do navegador e colocam seu próprio menu baseado em html no local correto.
fonte
Você pode assistir a este tutorial: http://www.youtube.com/watch?v=iDyEfKWCzhg Verifique se o menu de contexto está oculto primeiro e se possui uma posição absoluta. Isso garantirá que não haverá vários menus de contexto e criação inútil de menus de contexto. O link para a página é colocado na descrição do vídeo do YouTube.
fonte
Eu sei que isso também é bastante antigo. Recentemente, tive a necessidade de criar um menu de contexto que injeto em outros sites com propriedades diferentes com base no elemento clicado.
É um tanto difícil, e existem maneiras melhores prováveis de conseguir isso. Ele usa o menu de contexto do jQuery Library localizado aqui
Eu gostei de criá-lo e, embora vocês possam ter alguma utilidade nisso.
Aqui está o violino . Espero que possa ajudar alguém por aí.
fonte
Eu tenho uma implementação fácil e agradável usando o bootstrap da seguinte maneira.
fonte