`

右键菜单

 
阅读更多
<!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>

 

分享到:
评论

相关推荐

    WPF 与 WinForm 调用系统右键菜单/资源管理器右键菜单/桌面右键菜单示例

    本示例主要探讨如何在WPF和WinForm应用中调用系统、资源管理器及桌面的右键菜单,以增强用户交互体验。 首先,让我们深入理解一下这两个技术: 1. **WPF**:作为.NET Framework的一部分,WPF引入了基于XAML的声明...

    右键菜单修复工具箱

    标题中的“右键菜单修复工具箱”是指一系列用于解决Windows操作系统中右键菜单问题的软件集合。这些工具通常包括各种修复功能,旨在帮助用户恢复或调整桌面、"计算机"(我的电脑)以及其他位置的右键点击菜单选项。 ...

    动态及静态添加右键菜单策略

    在Windows操作系统中,右键菜单是用户与系统交互的重要途径之一。它提供了快速访问常用功能的途径,而“动态及静态添加右键菜单策略”则是关于如何扩展这一功能的两个不同实现方式。本文将深入探讨这两种策略,并...

    一键清除所有多余的桌面右键菜单

    在Windows操作系统中,桌面右键菜单是我们经常使用的功能,它提供了快速访问常用操作的途径。然而,随着时间的推移和各种软件的安装,桌面右键菜单可能会变得冗余且混乱,充斥着许多不常用或者不必要的选项。这不仅...

    右键菜单管理工具(win7/win10迄今为止最好用的)

    在Windows 7和Windows 10系统中,右键菜单是用户进行快速操作的重要途径,例如复制、粘贴、重命名、属性查看等。然而,随着时间的推移和软件的安装,右键菜单可能会变得拥挤不堪,含有许多不常用或者无用的选项,这...

    beyondcompare加入右键菜单方法

    beyondcompare加入右键菜单方法 Beyond Compare是一款功能强大的文件比较工具,它可以帮助用户快速比较和同步文件。但是,默认情况下,Beyond Compare并不提供直接在右键菜单中访问的功能。这就需要用户手动打开...

    pb9做的右键菜单

    在本场景中,“pb9做的右键菜单”是指使用PowerBuilder 9创建的自定义Windows操作系统右键快捷菜单功能。 右键菜单,也称为上下文菜单,是用户在鼠标右键点击时弹出的一系列操作选项,为用户提供快速访问常用功能的...

    flex添加右键菜单实例

    在Flex编程中,右键菜单(ContextMenu)是一个重要的交互元素,它可以为用户提供额外的操作选项。在给定的实例中,我们看到如何在Flex应用中创建并添加自定义的右键菜单。下面将详细解释这个实例中的关键知识点。 ...

    Web右键菜单 很不错的右键菜单

    在标题和描述中提到的"Web右键菜单 很不错的右键菜单"可能是指一个定制的、功能丰富的JavaScript插件或库,用于增强网站的用户体验。 一、Web右键菜单的重要性 1. 用户体验:默认的浏览器右键菜单虽然基础,但可能...

    删除右键菜单中的选项

    ### 删除右键菜单中的选项——全面指南 #### 核心概念 右键菜单是我们日常使用计算机过程中频繁接触的功能之一,它提供了对文件、文件夹甚至桌面背景等项目的快速操作选项。然而,随着软件安装和卸载的过程,右键...

    VC++ windows右键菜单

    VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键...

    js树形菜单加右键菜单

    在IT行业中,树形菜单和右键菜单是两种常见的用户界面元素,它们为用户提供了一种组织和交互数据的有效方式。本文将深入探讨这两种菜单的概念、实现原理以及它们在实际项目中的应用,特别是如何在JavaScript环境下...

    WIN7右键菜单清理注册表(含恢复)

    在Windows 7操作系统中,右键菜单是用户访问常用功能的快捷方式,它包含了大量快捷操作,如“新建”、“属性”、“发送到”等。然而,随着时间的推移,安装的各种软件可能会向右键菜单添加自定义项,导致右键菜单变...

    管理右键菜单管理右键菜单

    在Windows操作系统中,右键菜单是用户日常操作中不可或缺的一部分,它提供了快速访问常用功能的途径。"管理右键菜单"这个主题主要涉及到如何自定义、优化和控制计算机上显示的右键快捷方式,以便更好地适应个人的...

    echarts右键菜单实例 --- 不修改源码

    标题“echarts右键菜单实例 --- 不修改源码”表明我们将探讨如何在ECharts图表上添加右键菜单,而无需直接修改ECharts的源代码。这意味着我们将通过ECharts的API和事件监听来实现这一功能,这是一个常见的最佳实践,...

    右键菜单案例、BootStrap样式

    右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...

    右键菜单修改小工具绝对安全

    标题中的“右键菜单修改小工具绝对安全”指的是一个专门用于调整Windows系统右键菜单的软件,它允许用户自定义和优化右键点击文件或文件夹时出现的上下文菜单。这种工具通常是为了提高用户的工作效率,让用户可以更...

    C#在gridview添加右键菜单(C#源码).rar

    C#在gridview添加右键菜单(C#源码) C#在gridview添加右键菜单(C#源码) C#在gridview添加右键菜单(C#源码) C#在gridview添加右键菜单(C#源码) C#在gridview添加右键菜单(C#源码) C#在gridview添加右键菜单...

    VC++在系统右键菜单中添加自定义菜单项

    在Windows操作系统中,扩展系统右键菜单是一种常见的软件功能,可以让用户通过右键点击文件、文件夹或桌面等地方快速访问特定的操作。本教程将详细讲解如何使用VC++(Visual C++)来实现这一功能,涉及到的主要知识...

    易语言编辑框增加右键菜单项源码

    在本例中,我们将探讨如何在易语言的编辑框中添加右键菜单项,这将增强用户的交互体验,使用户能够通过右键点击编辑框执行特定的功能。 首先,我们需要理解易语言中的“右键菜单项”是如何工作的。在Windows应用...

Global site tag (gtag.js) - Google Analytics