标签:
效果图:

html:
<div id="rightkey"> <ul> <li><img src="images/xmgl.png" /><div>项目管理</div></li> <li><img src="images/bbzx.png" /><div>我的项目</div></li> <li class="line"></li> <li><img src="images/jqgl.png" /><div>我的项目</div></li> <li><img src="images/scgl.png" /><div>我的项目</div></li> <li><img src="images/jqgl.png" /><div>我的项目</div></li> <li><img src="images/scgl.png" /><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");
})
标签:
原文地址:http://www.cnblogs.com/xuhang/p/4572383.html