Blog Reacción Estudio

¡Tu zona de aprendizaje!

Menú personalizado al pulsar el botón derecho del ratón con jQuery

Para hacer un menú personalizado al pulsar el botón derecho del ratón dentro de nuestra aplicación web, (como por ejemplo el menú que usa Google Docs, o Rapidshare), vamos a utilizar HTML, jQuery y algo de CSS para darle estilo a nuestro menú.

HTML

<div id="menu">
    	<ul>
            <li id="copiar">Copiar</li>
            <li id="mover">Mover</li>
            <li id="eliminar">Eliminar</li>
        </ul>
</div>

Hacemos un pequeño menú, con algunas opciones como Copiar, Mover y Eliminar.

CSS

	ul{
		list-style: none;
		list-style-type: none;
		list-style-position: outside;
	}

	li{
		line-height: 30px;
		font-size: 16px;
		cursor:pointer;
	}
	
	div{
		width:250px;
		position:absolute;	
		border:1px solid black;
		
		-moz-box-shadow: 0 0 5px #888;
		-webkit-box-shadow: 0 0 5px#888;
		box-shadow: 0 0 5px #888;
	}

Le ponemos un estilo básico a nuestro menú.

jQuery

$(document).ready(function(){
		
		//Ocultamos el menú al cargar la página
		$("#menu").hide();
		
		/* mostramos el menú si hacemos click derecho
		con el ratón */
		$(document).bind("contextmenu", function(e){
			$("#menu").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
			return false;
		});
		
		
		//cuando hagamos click, el menú desaparecerá
		$(document).click(function(e){
			if(e.button == 0){
				$("#menu").css("display", "none");
			}
		});
		
		//si pulsamos escape, el menú desaparecerá
		$(document).keydown(function(e){
			if(e.keyCode == 27){
				$("#menu").css("display", "none");
			}
		});
		
		//controlamos los botones del menú
		$("#menu").click(function(e){
			
			// El switch utiliza los IDs de los <li> del menú
			switch(e.target.id){
				case "copiar":
					alert("copiado!");
					break;	
				case "mover":
					alert("movido!");
					break;
				case "eliminar":
					alert("eliminado!");
					break;
			}
			
		});
		
				
	});			

El código está explicado en los comentarios y es realmente sencillo.

Ver ejemplo

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR