Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite ae galera...
Hj respondi uma dúvida no fórum de Javascript sobre como criar um menu de contexto personalizado... Achei o resultado interessante, então estou postando aqui:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style: none
}
#context_menu {
background: #CECECE;
-moz-border-radius: 5px 5px;
width: 200px;
font-size: 10pt;
position: absolute;
display: none;
}
#context_menu ul li {
padding: 2px 10px;
-moz-border-radius: 5px 5px;
cursor: default;
}
#context_menu ul li:hover {
background: #069;
color: #FFF;
}
</style>
<script type="text/javascript" language="JavaScript">
function click(e){
document.getElementById("teste").innerHTML = "";
var menu = document.getElementById("context_menu");
var mouseEvent = e || event;
if (mouseEvent.button == 2 || mouseEvent.button == 3) {
mostrar(mouseEvent);
menu.onmouseout = function(e){
var mouseEvent = e || event;
var element = mouseEvent.relatedTarget || mouseEvent.toElement;
if (element.nodeName != "LI") {
esconder();
}
};
}
if (mouseEvent.button == 0 || mouseEvent.button == 1) {
esconder();
}
}
document.onmousedown = click;
document.oncontextmenu = function(){
return false
};
function mostrar(e){
var menu = document.getElementById("context_menu");
menu.style.display = "block";
menu.style.top = e.clientY + 5 + "px";
menu.style.left = e.clientX + 5 + "px";
}
function esconder(){
setTimeout(function(){
var menu = document.getElementById("context_menu");
menu.style.display = "none";
}, 100);
}
</script>
</head>
<body>
<div id="teste"></div>
<div id="context_menu">
<ul>
<li>Copiar</li>
<li>Colar</li>
<li>Selecionar Tudo</li>
</ul>
</div>
</body>
</html>Agora usem a imaginação... http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif
Ficou show, man! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif