Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henrique Barcelos

Menu de contexto personalizado (Botão Direito do Mouse)

Por , em Javascript

Recommended Posts

Henrique Barcelos    290

Henrique Barcelos
Postado

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

Tá beeem básicão, é só a idéia inicial...

 

Agora usem a imaginação... http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito