CSS3之重新定义鼠标右键

效果图：

html:

	<div id="rightkey">
		<ul>
			<li><img src="data:images/xmgl.png" alt="" /><div>项目管理</div></li>
			<li><img src="data:images/bbzx.png" alt="" /><div>我的项目</div></li>
			<li class="line"></li>
			<li><img src="data:images/jqgl.png" alt="" /><div>我的项目</div></li>
			<li><img src="data:images/scgl.png" alt="" /><div>我的项目</div></li>
			<li><img src="data:images/jqgl.png" alt="" /><div>我的项目</div></li>
			<li><img src="data:images/scgl.png" alt="" /><div>我的项目</div></li>
		</ul>
	</div>

css:

html,body{margin: 0;padding: 0;background-color: #eee;}
#rightkey{position: fixed;display: none;width: 200px;height: 230px;z-index: 1000;padding: 10px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #fff;border: 1px solid transparent;border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-o-box-shadow: 0 6px 12px rgba(0,0,0,.175);-ms-box-shadow:0 6px 12px rgba(0,0,0,.175);background-clip: padding-box;}
#rightkey ul{margin: 0;padding: 0;list-style-type: none;overflow: hidden;}
#rightkey li{width: 100%;height: 20px;cursor: pointer;line-height: 20px;padding: 8px 15px;font-size: 16px;overflow: hidden;}
#rightkey li:hover{background-color: rgb(245,245,245);}
#rightkey img{width: 20px;height: 20px;border-radius: 10px;display: block;float: left;margin-right: 10px;background-color: red;}
#rightkey div{width: 150px;height: 16px;float: left;}
#rightkey .line{padding: 0;margin: 5px 0;width: 100%;height: 1px;background-color: #ddd;}

　　js:

	document.oncontextmenu=function(){return false;};
	var initx=0,inity=0;
	var rightkey=$("#rightkey");
	$(document).mousedown(function(e){
		var rightwidth=rightkey.width()+10;
		var rightheight=rightkey.height()+45;
		var x=e.screenX+10;
		var y=e.screenY-50;
		if(3 == e.which){
			initx=x;
			inity=y;
			rightkey.css({"top":y,"left":x,"display":"block"});
		}else if(1 == e.which){
			var dx=x-initx;
			var dy=y-inity;
			if(!(dx <= rightwidth && dx >=0 && dy>=0 && dy <= rightheight)){
				rightkey.css("display","none");
			}
		}
	});

	rightkey.find("li").click(function(){
		alert($(this).html());
		rightkey.css("display","none");
	})