Javascript 自定义多级右键菜单效果代码

时间：2022-06-25 20:16:57 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义多级右键菜单</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 5fae8f6f96c59ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(img/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#rightMenu ul li{float:left;clear:both;cursor:pointer;line-white-space:nowrap;padding:0 30px;}
#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(img/arrow.png);}
#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;line-background-position:right -8px;padding:0 29px;}
#rightMenu ul ul{display:none;position:absolute;}
</style>
<script type="text/javascript">
var getOffset = {
	top: function (obj) {
		return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
	},
	left: function (obj) {
		return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
	}	
};
window.onload = function ()
{
	var oMenu = document.getElementById("rightMenu");
	var aUl = oMenu.getElementsByTagName("ul");
	var aLi = oMenu.getElementsByTagName("li");
	var showTimer = hideTimer = null;
	var i = 0;
	var maxWidth = max;
	var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
	
	oMenu.style.display = "none";
	
	for (i = 0; i < aLi.length; i++)
	{
		//为含有子菜单的li加上箭头
		aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
		
		//鼠标移入
		aLi[i].onmouseover = function ()
		{
			var oThis = this;
			var oUl = oThis.getElementsByTagName("ul");
			
			//鼠标移入样式
			oThis.className += " active";			
			
			//显示子菜单
			if (oUl[0])
			{
				clearTimeout(hideTimer);				
				showTimer = setTimeout(function ()
				{
					for (i = 0; i < oThis.parentNode.children.length; i++)
					{
						oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
						(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
					}
					oUl[0].style.display = "block";
					oUl[0].style.top = oThis.offsetTop + "px";
					oUl[0].style.left = oThis.offsetWidth + "px";
					setWidth(oUl[0]);
					
					//最大显示范围					
					maxWidth = aDoc[0] - oUl[0].offsetWidth;
					maxHeight = aDoc[1] - oUl[0].offsetHeight;
					
					//防止溢出
					maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
					maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
				},300);
			}			
		};
			
		//鼠标移出	
		aLi[i].onmouseout = function ()
		{
			var oThis = this;
			var oUl = oThis.getElementsByTagName("ul");
			//鼠标移出样式
			oThis.className = oThis.className.replace(/s?active/,"");
			
			clearTimeout(showTimer);
			hideTimer = setTimeout(function ()
			{
				for (i = 0; i < oThis.parentNode.children.length; i++)
				{
					oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
					(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
				}
			},300);
		};
	}	
	
	
	//自定义右键菜单
	document.oncontextmenu = function (event)
	{
		var event = event || window.event;
		oMenu.style.display = "block";
		oMenu.style.top = event.clientY + "px";
		oMenu.style.left = event.clientX + "px";
		setWidth(aUl[0]);
		
		//最大显示范围
		maxWidth = aDoc[0] - oMenu.offsetWidth;
		maxHeight = aDoc[1] - oMenu.offsetHeight;
		
		//防止菜单溢出
		oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
		oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
		return false;
	};
	
	//点击隐藏菜单
	document.onclick = function ()
	{
		oMenu.style.display = "none"	
	};
	
	//取li中最大的宽度, 并赋给同级所有li	
	function setWidth(obj)
	{
		max;
		for (i = 0; i < obj.children.length; i++)
		{
			var oLi = obj.children[i];			
			var ipaddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
			if (iWidth > maxWidth) maxWidth = iWidth;
		}
		for (i = 0; i < obj.children.length; i++) obj.children[i].style.px";
	}
};
</script>
</head>
<body>
<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<div id="rightMenu">
    <ul>
        <li><strong>JavaScript 学习</strong></li>
        <li>
            第一课
            <ul>
                <li><a href="http://www.111com.net/js_a/js.html" target="_blank">网页特效</a>原理分析</li>
                <li>响应用户操作</li>
                <li>提示框效果</li>
                <li>事件驱动</li>
                <li>元素属性操作</li>
            </ul>
        </li>
        <li>
            第二课
            <ul>
                <li>改变网页背景颜色</li>
                <li>函数传参</li>
                <li>高重用性函数的编写</li>
                <li>126邮箱全选效果</li>
                <li>循环及遍历操作</li>
            </ul>
        </li>
        <li>
            第三课
            <ul>
                <li>
                    JavaScript组成
                    <ul>
                        <li>ECMAScript</li>
                        <li>DOM</li>
                        <li>BOM</li>
                        <li>JavaScript兼容性来源</li>
                    </ul>
                </li>
                <li>JavaScript出现的位置、优缺点</li>
                <li>变量、类型、typeof、数据类型转换、变量作用域</li>
                <li>
                	闭包
                    <ul>
                        <li>什么是闭包</li>
                        <li>简单应用</li>
                        <li>闭包缺点</li>
                    </ul>
                </li>
                <li>运算符</li>
                <li>程序流程控制</li>
                <li>
                    定时器的使用
                    <ul>
                        <li>setInterval</li>
                        <li>setTimeout</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

Javascript 自定义多级右键菜单效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程