您的位置：首页 > 其它

右键菜单

2016-05-31 14:50 316 查看
4000 
<!DOCTYPE>
<html>
<head>
<title>右键菜单</title>
<meta charset="utf-8"/>
<style type="text/css">

#desktop {
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 45px;
}

*{margin: 0;padding: 0;}
.lanren {position: absolute; display: none;}
.lanren ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;}
.lanren ul a:hover{color: #000;text-decoration: none;}
.lanren ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}
.lanren ul li:hover{background: #c1c1c1;}
.lanren ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}

.lanren ul.nav2{left: 99px;top: 0;display: none;}
.lanren ul.nav3{left: 99px;top: 0;display: none;}
.lanren .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}
.lanren .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}

</style>
</head>
<body>
<div id="desktop"></div>
<div id="taskbar"></div>
<!--右键菜单-->
<div class="lanren" name="lanren">
<ul class="nav1" name="nav1">
<li class="li1"><a href="#">一级导航</a>
<ul class="nav2">
<li class="li2"><a href="#">二级导航</a></li>
<li class="li2"><a href="#">二级导航</a>
<ul class="nav3">
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
</ul>
</li>
<li class="li2"><a href="#">二级导航</a></li>
<li class="li2"><a href="#">二级导航</a></li>
</ul>
</li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a>
<ul class="nav2">
<li class="li2"><a href="#">二级导航</a></li>
<li class="li2"><a href="#">二级导航</a></li>
</ul>
</li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
</ul>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){

});

//显示右键菜单
document.oncontextmenu = function (ev) {
var oEvent=ev||event;
var oDiv=document.getElementsByName('lanren')[0];
var oNav=document.getElementsByName('nav1')[0];
oDiv.style.display='block';
//oDiv.style.left=oEvent.clientX+'px';
//oDiv.style.top=(oEvent.clientY+2)+'px';

var clientX = event.clientX;
var clientY = event.clientY;
var redge = document.body.clientWidth - clientX;
var bedge = document.body.clientHeight - clientY;
var menu = oDiv;
var menuLeft = 0;
var menuTop = 0;
if (redge < oNav.offsetWidth)
menuLeft = document.body.scrollLeft + clientX - oNav.offsetWidth;
else
menuLeft = document.body.scrollLeft + clientX;
if (bedge < oNav.offsetHeight)
menuTop = document.body.scrollTop + clientY - oNav.offsetHeight;
else
menuTop = document.body.scrollTop + clientY;

oDiv.style.left=menuLeft+'px';
oDiv.style.top=(menuTop+2)+'px';

return false;
};
//隐藏右键菜单
document.onclick=function () {
var oDiv=document.getElementsByName('lanren')[0];
oDiv.style.display='none';
};
</script>
</body>
</html>

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航