Blog Reacción Estudio

¡Tu zona de aprendizaje!

menu_boton_derecho

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

  • CuevanaMovil

    Y si solo quiero aplicarlo a una parte de la pagina y no a toda, como hago? Es decir.. suponele que tengo una pagina… eso aplica a todo lo que se encuentra dentro de body? Si quiero solo agregarlo a un video HTML5? Como personalizo su alcance?

    • Alberto

      Si quieres aplicarlo a un vídeo HTML5, eso deberás personalizarlo dependiendo del reproductor de vídeo que utilices. Deberás verlo en la documentación del reproductor, por lo que éste código no te sirve para nada.

  • Israel Piña Peña

    Quisiera poner este menusito en una tabla, pero que se ejecute dentro de cada como tendria que implementar el codigo?? Gracias por el aporte

    • Alberto
      $(document).bind(&quot;contextmenu&quot;, function(e){
      
                        $(&quot;#menu&quot;).css({'display':'block', 'left':e.pageX, 'top':e.pageY});
                        return false;
      
                  });
      

      Este código de arriba es el evento que indica cuando se ha de mostrar el menú, lo único que tenemos que hacer es cambiar el selector, si no conoces los selectores de jQuery puedes ver más información sobre selectores en su web.

      Por ejemplo, para que se muestre el menú al pinchar en la primera filia de una tabla sería así:

              $(&quot;table tr:first&quot;).bind(&quot;contextmenu&quot;, function(e){
                  $(&quot;#menu&quot;).css({'display':'block', 'left':e.pageX, 'top':e.pageY});
                  return false;
              });
      

      Aquí puedes ver el ejemplo:

      http://jsfiddle.net/Q4vDv/2/

  • http://hilsoft.comule.com/ fabricio trujillo

    graciaaas :”)

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