右键菜单

最新推荐文章于 2024-11-05 15:26:40 发布

shuizhongyue_

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/shuizhongyue_/article/details/84804786

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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.οnclick=function () {
		var oDiv=document.getElementsByName('lanren')[0];   
		oDiv.style.display='none';
	};
</script>
</body>
</html>