This article describes the JS implementation of a fully customizable Web page with multilevel directory of the right mouse button menu method. Share to everyone for your reference. The specific analysis is as follows:
This is a very good web mouse features, this code can control the Web page in the right mouse button menu, completely in accordance with your meaning to build, you can take a multi-level directory display.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>JS Custom Web page multilevel navigation menu </title>
<style type= "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;}
#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);}
#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 (images/ Arrow.png);}
#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;}
#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++)
{
To add an arrow to an Li that contains a submenu
Ali[i].getelementsbytagname ("ul") [0] && (ali[i].classname = "Sub");
Mouse move into
Ali[i].onmouseover = function ()
{
var othis = this;
var Oul = othis.getelementsbytagname ("ul");
Mouse Move Style
Othis.classname + + "active";
Show 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.parentnode.children[i].getelementsbytagname ("ul") [0] &&
(Othis.parentnode.children[i].getelementsbytagname ("ul") [0].style.display = "none");
}
},300);
};
}
Customizing the right button 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 on the Hide menu
Document.onclick = function ()
{
OMenu.style.display = "None"
};
Take the largest width of Li and assign it to all of the siblings
function SetWidth (obj)
{
maxwidth = 0;
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>
<body>
<center> Custom Right-click menu, click on the page to see the effect. </center>
<div id= "Rightmenu" >
<ul>
<li><strong>javascript Learning </strong></li>
<li>
Cloud-dwelling communities
<ul>
<li> Web page Special effects principle Analysis </li>
<li> responding to user actions </li>
<li> Prompt Box effect </li>
<li> Event Driven </li>
<li> Element Property Operations </li>
</ul>
</li>
<li>
Www.jb51.net
<ul>
<li> change page background color </li>
<li> Function Reference </li>
<li> the writing of high reusability function </li>
<li>126 e-mail full selection effect </li>
<li> cycle and traversal operations </li>
</ul>
</li>
<li>
Lesson Three
<ul>
<li>
JavaScript composition
<ul>
<li>ECMAScript</li>
<li>DOM</li>
<li>BOM</li>
<li>javascript Compatibility Source </li>
</ul>
</li>
Location, pros </li> cons of <li>javascript
<li> variables, types, typeof, data type conversions, variable scopes </li>
<li>
Closed Bag
<ul>
<li> What is closure </li>
<li> Simple Application </li>
<li> Closure Defects </li>
</ul>
</li>
<li> operator </li>
<li> Program Flow Control </li>
<li>
The use of the timer
<ul>
<li>setInterval</li>
<li>setTimeout</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
I hope this article will help you with your JavaScript programming.
