Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Custom Multilevel Right-click menu </title> <style type=" Text/css "> Html,body{height:100%;o Verflow: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;height:24px;cursor:pointer;line-height:24px;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:1pxSolid #aecff7; height:22px;line-height:22px;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 = MaxHeight = 0; var ADOc = [Document.documentElement.offsetWidth, document.documentElement.offsetHeight]; OMenu.style.display = "None"; for (i = 0; i < ali.length i++) {//For Li with submenu plus Arrow ali[i].getelementsbytagname ("ul") [0] && (ali[i].classna Me = "Sub"); Mouse move into ali[i].onmouseover = function () {var othis = this; var Oul = othis.getelementsbytagname ("ul"); Mouse to move the style othis.classname + = "active"; Displays submenu 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]); Maximum display range maxwidth = adoc[0]-oul[0].offsetwidth; MaxHeight = adoc[1]-oul[0].offsetheight; Prevent overflow 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); } }; Mouse move out ali[i].onmouseout = function () {var othis = this; var Oul = othis.getelementsbytagname ("ul"); Mouse move out style Othis.classname = OThis.className.replace (/s?active/, ""); Cleartimeout (Showtimer); Hidetimer = settimeout (function () {for (i = 0; i < oThis.parentNode.children.length; i++) {Othis.par Entnode.children[i].getelementsbytagname ("ul") [0] && (othis.parentnode.children[i].getelementsbytagname ( "ul") [0].style.display = "none"); }},300); }; ///Custom Right-click menu 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]); Maximum display range maxwidth = adoc[0]-omenu.offsetwidth; MaxHeight = adoc[1]-omenu.offsetheight; Prevent menu Overflow omenu.offsettop > MaxHeight && (oMenu.style.top = MaxHeight + "PX "); Omenu.offsetleft > MaxWidth && (oMenu.style.left = maxwidth + "px"); return false; }; Click the Hide Menu Document.onclick = function () {OMenu.style.display = "none"}; Takes the largest width of the Li and assigns all Li function SetWidth (obj) {maxwidth = 0 to the same sibling; for (i = 0; i < obj.children.length i++) {var oLi = obj.children[i]; var iwidth = 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> </pead> <body> <center> Custom Right-click menu, click the Right button on the page to view the effect. </center> <div id= "Rightmenu" > <ul> <li><strong>javascript Learning </strong>< /li> <li> First lesson <ul> <li> Web Page Special effects principle Analysis </li> <li> responding to user actions </li> <li> prompt Box effect </li> <li> event driver </li> <li> element attribute operation </LI&G T </ul> </li> <li> Lesson two <ul> <li> change page background Color </li> <li> Function Reference </li> <li> high-reusability function writing </li> ; li>126 e-mail effects </li> <li> loops and traversal operations </li> </ul> </li> <li> Third Lesson <ul> <li> JavaScript composition <ul> <li>ECMAScript</li> <li>dom</li > <li>BOM</li> <li>javascript compatibility Sources </li> </ul> </li> <li>javascript location, advantages and disadvantages </li> <li> variables, types, typeof, data type conversions, variable scopes </li> <li> closures <ul> <li> What is closure </li> <li> simple Application </li> <li> Closure Disadvantages </li> </ul> </li> <li> operator </l i> <li> Program Flow control </li> <li> Timer usage <ul> <li>setInterval</li> <li>settimeout</li& Gt </ul> </li> </ul> </li> </ul> </div> </body > </ptml></td> </tr> </table>
Tip: You can modify some of the code before running
