<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右键菜单</title>
<style type="text/css">
*{margin:0;padding:0}
ul{
position: absolute;
width:100px;
list-style: none;
display: none;
}
ul li{
padding: 10px;
background: #AFB9DE;
border: 1px solid #ccc;
border-radius: 3px;
color: white;
cursor : pointer;
}
ul li:hover{
background: #E86F6F;
}
li ul{
}
</style>
</head>
<body>
<ul id="menu">
<li>Java</li>
<li>
JavaScript
<ul>
<li>基础</li>
<li>DOM</li>
<li>
BOM
<ul>
<li>window</li>
<li>location</li>
<li>navgatior</li>
</ul>
</li>
<li>jQuery</li>
</ul>
</li>
<li>C</li>
</ul>
</body>
<script type="text/javascript">
var menu = document.querySelector("#menu");
var lis = document.querySelectorAll("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseenter = function(){
var children = this.querySelector("ul");
if(children){
children.style.left = this.offsetWidth + this.offsetLeft + "px";
children.style.top = this.offsetTop + "px";
children.style.display = "block";
console.log( this.offsetWidth+"--"+this.offsetLeft+"--"+this.offsetTop)
}
}
lis[i].onmouseleave = function(){
var children = this.querySelector("ul");
if(children){
children.style.display = "none";
}
}
}
menu.onmouseleave = function(){
this.style.display = "none";
}
document.oncontextmenu = function(ev){
var x = ev.clientX , y = ev.clientY;
menu.style.display = "block";
menu.style.left = x + "px";
menu.style.top = y + "px";
return false;//取消对象的默认动作就可以return false。
}
</script>
</html>
右键菜单
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- (1) propTypes库 （官网）http://www.css88.com/react/docs/typech...
- 网上大多数教程就是执行的 Cygwin.bat 文件，这样的打开的是一个Windows自带的Cmd窗口，不是理想的...
- sublime text3 非常好用，这不用说，但是安装之后并没有出现在右击菜单中，这将给使用带来很多不便，一下方...
- mac实现右键菜单打开文件夹并选中文件，可使用如下系统api：/* Activate the Finder and...
