本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法。分享给大家供大家参考。具体分析如下： 这是很不错的一个网页鼠标特性，这个代码可以控制网页中鼠标的右键菜单，完全按照你的意思打造，可以带多级的目录显示。 复制代码 代码如下: JS自定义网页多级导航菜单 <br /> html,body{height:100%;overflow:hidden;}<br /> body,div,ul,li{margin:0;padding:0;}<br /> body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}<br /> ul{list-style-type:none;}<br /> #rightMenu{position:absolute;top:-9999px;left:-9999px;}<br /> #rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(images/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}<br /> #rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}<br /> #rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow.png);}<br /> #rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}<br /> #rightMenu ul ul{display:none;position:absolute;}<br /> <br /> var getOffset = {<br /> top: function (obj) {<br /> return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)<br /> },<br /> left: function (obj) {<br /> return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)<br /> }<br /> };<br /> window.onload = function ()<br /> {<br /> var oMenu = document.getElementById("rightMenu");<br /> var aUl = oMenu.getElementsByTagName("ul");<br /> var aLi = oMenu.getElementsByTagName("li");<br /> var showTimer = hideTimer = null;<br /> var i = 0;<br /> var maxWidth = maxHeight = 0;<br /> var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];<br /> oMenu.style.display = "none";<br /> for (i = 0; i < aLi.length; i++)<br /> {<br /> //为含有子菜单的li加上箭头<br /> aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");<br /> //鼠标移入<br /> aLi[i].onmouseover = function ()<br /> {<br /> var oThis = this;<br /> var oUl = oThis.getElementsByTagName("ul");<br /> //鼠标移入样式<br /> oThis.className += " active";<br /> //显示子菜单<br /> if (oUl[0])<br /> {<br /> clearTimeout(hideTimer);<br /> showTimer = setTimeout(function ()<br /> {<br /> for (i = 0; i < oThis.parentNode.children.length; i++)<br /> {<br /> oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&<br /> (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");<br /> }<br /> oUl[0].style.display = "block";<br /> oUl[0].style.top = oThis.offsetTop + "px";<br /> oUl[0].style.left = oThis.offsetWidth + "px";<br /> setWidth(oUl[0]);<br /> //最大显示范围<br /> maxWidth = aDoc[0] - oUl[0].offsetWidth;<br /> maxHeight = aDoc[1] - oUl[0].offsetHeight;<br /> //防止溢出<br /> maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");<br /> maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")<br /> },300);<br /> }<br /> };<br /> //鼠标移出<br /> aLi[i].onmouseout = function ()<br /> {<br /> var oThis = this;<br /> var oUl = oThis.getElementsByTagName("ul");<br /> //鼠标移出样式<br /> oThis.className = oThis.className.replace(/\s?active/,"");<br /> clearTimeout(showTimer);<br /> hideTimer = setTimeout(function ()<br /> {<br /> for (i = 0; i < oThis.parentNode.children.length; i++)<br /> {<br /> oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&<br /> (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");<br /> }<br /> },300);<br /> };<br /> }<br /> //自定义右键菜单<br /> document.oncontextmenu = function (event)<br /> {<br /> var event = event || window.event;<br /> oMenu.style.display = "block";<br /> oMenu.style.top = event.clientY + "px";<br /> oMenu.style.left = event.clientX + "px";<br /> setWidth(aUl[0]);<br /> //最大显示范围<br /> maxWidth = aDoc[0] - oMenu.offsetWidth;<br /> maxHeight = aDoc[1] - oMenu.offsetHeight;<br /> //防止菜单溢出<br /> oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");<br /> oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");<br /> return false;<br /> };<br /> //点击隐藏菜单<br /> document.onclick = function ()<br /> {<br /> oMenu.style.display = "none"<br /> };<br /> //取li中最大的宽度, 并赋给同级所有li<br /> function setWidth(obj)<br /> {<br /> maxWidth = 0;<br /> for (i = 0; i < obj.children.length; i++)<br /> {<br /> var oLi = obj.children[i];<br /> var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2<br /> if (iWidth > maxWidth) maxWidth = iWidth;<br /> }<br /> for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";<br /> }<br /> };<br /> 自定义右键菜单，请在页面点击右键查看效果。 JavaScript 学习 脚本之家 网页特效原理分析 响应用户操作 提示框效果 事件驱动 元素属性操作 www.jb51.net 改变网页背景颜色 函数传参 高重用性函数的编写 126邮箱全选效果 循环及遍历操作 第三课 JavaScript组成 ECMAScript DOM BOM JavaScript兼容性来源 JavaScript出现的位置、优缺点 变量、类型、typeof、数据类型转换、变量作用域 闭包 什么是闭包 简单应用 闭包缺点 运算符 程序流程控制 定时器的使用 setInterval setTimeout 希望本文所述对大家的javascript程序设计有所帮助。
