Como criar um menu de contexto ao clicar com o botão direito do mouse:

Tente clicar com o botão direito.

document.oncontextmenu =criar_menu_contexto;
document.body.onmousedown = function (){remover_menu_contexto();}

function criar_menu_contexto(e){
var links = new Array(
{"nome":"teste1","link":"#link1"},
{"nome":"teste2","link":"#link2"},
{"nome":"teste3","link":"#link3"},
{"nome":"teste4","link":"#link4"},
{"nome":"teste5","link":"#link5"},
{"nome":"teste6","link":"#link6"}
)

//excluir o menu de contexto caso já tenha sido criado
remover_menu_contexto();

//pegar as coordenadas do mouse
var x = pega_coordenadas_x(e);
var y = pega_coordenadas_y(e);
//criar o menu de contexto
var menu = document.createElement("div");
var ul = document.createElement("ul");
for(i=0;i<links.length;i++){
var li = document.createElement("li");
var link = document.createElement("a");
var nome = document.createTextNode(links[i].nome);
link.href=links[i].link;
link.appendChild(nome);
li.appendChild(link);
ul.appendChild(li);
}       
menu.appendChild(ul);   
menu.style.cssText = "position:absolute; top:"+y+"px; left:"+x+"px; background-color:#FFFFCC; border:1px solid #CCCCCC; padding:5px;";
menu.id="menu_de_contexto";
document.body.appendChild(menu);
return false;
}
function remover_menu_contexto(){
if (menu = document.getElementById("menu_de_contexto"))
document.body.removeChild(menu);
}

function pega_coordenadas_x(e){
if (!e) var e = window.event;
if (e.pageX || e.pageY)     {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)     {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}

return (posx);
}   
function pega_coordenadas_y(e){
if (!e) var e = window.event;
if (e.pageX || e.pageY)     {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)     {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
return (posy);
}

Comments

Add New Search

Write comment
Name:
Email:	do not notifynotify
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."