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