Crear un menú contextual en JQuery al pulsar el botón derecho del ratón

Bienvenidos a Vertutoriales, en esta ocasión vengo a poner el código y un tutorial en vídeo para explicar una manera de crear un menú contextual para utilizar en nuestras aplicaciones web, todo en JQuery y utilizando listas de html.

Como ya sabéis (y sino ya lo digo) este código está sacado del editor de escenarios para el juego de Rol que estamos desarrollando. En este editor necesitábamos darle más funcionalidades a la gestión de los objetos en pantalla y una manera eficaz es generando un menú al pinchar sobre el objeto con el botón derecho del ratón, ofreciendo de esta manera unas opciones añadidas a las que pueda haber ya en pantalla.

Para ello vamos a necesitar por un lado las diferentes opciones. Ni que decir que estamos trabajando con JQuery y el framework Bootstrap 3.0. Para las opciones que decíamos, hemos utilizado una lista como la siguiente:

Lista de menú contextual en html

Source code

<ul id="menuCapa" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">            
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="bloqueaCapa();">Bloquear edici&oacute;n</a>
            </li>
            <li role="presentation" class="divider"></li>                        
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="alFrenteCapa();">Al frente</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="alFondoCapa();">Al fondo</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="restauraCapa();">Restaurar</a>
            </li>        
            <li role="presentation" class="divider"></li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="eliminaCapa();">Eliminar</a>
            </li>
          </ul>

Fijaros que la id de la lista es id=»menuCapa» que utilizaremos más adelante. Además en cada opción del menú podéis comprobar que se ha añadido un evento onClick, que llama a una función que luego ejecutará diferentes opciones, la clase es dropdown-menu para que parezca como decía un bonito menú desplegable en Bootstrap 😉

Luego nos falta la parte que lo hace funcionar en JQuery que os pongo ahora mismo:

Botón derecho en JQuery

Source code

$("#capa").mousedown(function(e) {			
			if (e.button == 2){
				$("#menuCapa").css("top", e.pageY - 20);
				$("#menuCapa").css("left", e.pageX - 20);
				$("#menuCapa").show('fast');			
			}
		});

En este reducido código, como podéis ver estoy ubicando la capa «menuCapa» en la posición e.pageY y e.pageX que son las posiciones que nos devuelve el ratón. Por otro lado e.button == 2 es para controlar que botón, en este caso es el botón derecho del ratón

Solo nos faltaría una cosa más, bloquear el menú contextual del propio navegador para que no se solapen ambos menús, para ello solo colocar el siguiente código:

Source code

$(document).bind("contextmenu", function(e){  
		 return false;
	});

Nada complicado, es solo introducir en el bind del documento cuando se lance el «contextmenu» simplemente devolver un false en la función y listo!

Ya tendríamos nuestro menú contextual para utilizar en nuestra aplicación web en unos minutos. En el vídeo que os he preparado os muestro exactamente esto pero a viva voz y no tenéis que leer jeje 😉

Como siempre, si os ha gustado podéis compartir y seguirme en youtube o facebook, sino, también podéis comentar para que mejore!