js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法。分享给大家供大家参考。具体分析如下：
这是很不错的一个网页鼠标特性，这个代码可以控制网页中鼠标的右键菜单，完全按照你的意思打造，可以带多级的目录显示。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS自定义网页多级导航菜单</title>
<styletype="text/css">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5\5fae\8f6f\96c5\9ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenuul{float:left;border:1pxsolid#979797;background:#f1f1f1url(images/line.png)24px0repeat-y;padding:2px;box-shadow:2px2px2pxrgba(0,0,0,.6);}
#rightMenuulli{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:030px;}
#rightMenuulli.sub{background-repeat:no-repeat;background-position:right9px;background-image:url(images/arrow.png);}
#rightMenuulli.active{background-color:#f1f3f6;border-radius:3px;border:1pxsolid#aecff7;height:22px;line-height:22px;background-position:right-8px;padding:029px;}
#rightMenuulul{display:none;position:absolute;}
</style>
<scripttype="text/javascript">
vargetOffset={
top:function(obj){
returnobj.offsetTop+(obj.offsetParent?arguments.callee(obj.offsetParent):0)
},
left:function(obj){
returnobj.offsetLeft+(obj.offsetParent?arguments.callee(obj.offsetParent):0)
}
};
window.onload=function()
{
varoMenu=document.getElementById("rightMenu");
varaUl=oMenu.getElementsByTagName("ul");
varaLi=oMenu.getElementsByTagName("li");
varshowTimer=hideTimer=null;
vari=0;
varmaxWidth=maxHeight=0;
varaDoc=[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()
{
varoThis=this;
varoUl=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()
{
varoThis=this;
varoUl=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)
{
varevent=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");
returnfalse;
};
//点击隐藏菜单
document.onclick=function()
{
oMenu.style.display="none"
};
//取li中最大的宽度,并赋给同级所有li
functionsetWidth(obj)
{
maxWidth=0;
for(i=0;i<obj.children.length;i++)
{
varoLi=obj.children[i];
variWidth=oLi.clientWidth-parseInt(oLi.currentStyle?oLi.currentStyle["paddingLeft"]:getComputedStyle(oLi,null)["paddingLeft"])*2
if(iWidth>maxWidth)maxWidth=iWidth;
}
for(i=0;i<obj.children.length;i++)obj.children[i].style.width=maxWidth+"px";
}
};
</script>
</head>
<body>
<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<divid="rightMenu">
<ul>
<li><strong>JavaScript学习</strong></li>
<li>
毛票票
<ul>
<li>网页特效原理分析</li>
<li>响应用户操作</li>
<li>提示框效果</li>
<li>事件驱动</li>
<li>元素属性操作</li>
</ul>
</li>
<li>
www.nhooo.com
<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>
希望本文所述对大家的javascript程序设计有所帮助。