Menú Contextual

by DanielSTh

HTML

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    
<div id="menu-contextual">
      <ul>
            <li class="m-ampliar" id="copiar">Ampliar</li>
            <li class="m-reducir" id="mover">Reducir</li>
            <li class="m-recargar" id="eliminar">Recargar</li>
            <li class="m-acerca" id="eliminar">Acerca</li>
            <li class="m-salir" id="eliminar">Salir</li>
        </ul>
</div>

CSS

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

li{
		line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #C6C6C6;
  padding: 0 30px;
    transition:all 0.4s;
	}
li:hover{background-color:#F2F2F2;}
.m-salir{  background: url(http://images.all-free-download.com/images/graphiclarge/logout_98558.jpg) left no-repeat;
    background-size: contain;}
	
	#menu-contextual{
	    font-family: "PT Sans", sans-serif;
		width:150px;
		position:fixed;	
		border:1px solid #C6C6C6;
		
		-moz-box-shadow: 0px 0px 2px #C0C0C0;
		-webkit-box-shadow: 0px 0px 2px #C0C0C0;
		box-shadow: 0px 0px 2px #C0C0C0;
        position;fixed:
	}

JavaScript

$(document).ready(function(){
		
		//Ocultamos el menú al cargar la página
		$("#menu-contextual").hide();
		
		/* mostramos el menú si hacemos click derecho
		con el ratón */
		$(document).bind("contextmenu", function(e){
			$("#menu-contextual").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-contextual").css("display", "none");
			}
		});
		
		//si pulsamos escape, el menú desaparecerá
		$(document).keydown(function(e){
			if(e.keyCode == 27){
				$("#menu-contextual").css("display", "none");
			}
		});
		
		//controlamos los botones del menú
		$("#menu-contextual").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;
			}
			
		});
		
				
	});