js实现的四级左侧网站分类菜单实例
本文实例讲述了js实现的四级左侧网站分类菜单。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;
charset=iso-8859-1"/>
<scriptsrc="http://www.google-analytics.com/urchin.js"
type="text/javascript">
</script>
<scripttype="text/javascript">
_uacct="UA-152060-1";
urchinTracker();
</script>
<title>demo</title>
<styletype="text/css">
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}
#nav,#navul{
list-style:none;
background:#F9F9F9;
font-weight:bold;
padding:0px;
margin:0px;
border:solid1px#CCCCCC;
border-bottom:0px;
width:150px;
text-align:left;
}
#navulul{
border:solid1px#CCCCCC;
border-bottom:0px;
}
#nava{
display:block;
width:150px;
w\idth:140px;
color:#333333;
text-decoration:none;
text-align:center;
border-bottom:solid1px#CCCCCC;
text-align:left;
padding-left:10px;
}
#nava:hover{
color:#336666;
}
#nava.selected{
background:url(/images/bb_expand.gif)no-repeatright50%;
}
#navli{
line-height:22px;
position:relative;
}
#navliul{
position:absolute;
left:-999em;
width:150px;
font-weight:normal;
margin:0px;
padding:0px;
}
#navlili{
width:150px;
}
#navliula{
width:150px;
w\idth:126px;
padding:0px12px;
line-height:22px;
text-align:left;
}
#navliulul{
margin:0px00150px;
}
#navli:hoverulul,#navli.sfhoverulul,#navli:hoverululul{
left:-999em;
}
#navli:hoverul,#navlili:hoverul,#navli.sfhoverul,#navlili.sfhoverul,#navlilili:hoverul
{
left:auto;
}
#navli:hoverul,#navli.sfhoverul{
left:150px;
top:0px;
}
#navli:hover,#navli.sfhover{
background:#F5E3C0;
}
*html#navli{
float:left;
height:1%;
}
*html#navlia{
height:1%;
}
-->
</style>
<scripttype="text/javascript">
<!--//--><![CDATA[//><!--
sfHover=function(){
varsfEls=document.getElementById("nav").getElementsByTagName("LI");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+="sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("sfhover\\b"),"");
}
}
}
if(window.attachEvent)window.attachEvent("onload",sfHover);
//--><!]]>
</script>
</head>
<body>
<p><ahref="javascript:history.back()">Back</a></p>
<ulid="nav">
<li><ahref="">Home</a></li>
<li><ahref="/aboutme.html">AboutMe</a></li>
<li><aclass="selected"href="/tutorials.html">Tutorials</a>
<ul>
<li><ahref="#">SubMenu31</a></li>
<li><aclass="selected"href="#">SubMenu32</a>
<ul>
<li><aclass="selected"href="#">SubMenu321</a><ul>
<li><ahref="#">SubMenu321</a></li>
</ul></li>
<li><ahref="#">SubMenu322</a></li>
<li><ahref="#">SubMenu323</a></li>
<li><aclass="selected"href="#">SubMenu324</a><ul>
<li><ahref="#">SubMenu321</a></li>
<li><ahref="#">SubMenu322</a></li>
<li><ahref="#">SubMenu323</a></li>
<li><ahref="#">SubMenu324</a></li>
</ul></li>
</ul>
</li>
<li><ahref="#">SubMenu33</a></li>
<li><ahref="#">SubMenu34</a></li>
</ul>
</li>
<li><aclass="selected"href="/gallery/gallery.html">Gallery</a>
<ul>
<li><ahref="#">SubMenu41</a></li>
<li><aclass="selected"href="#">SubMenu42</a>
<ul>
<li><ahref="#">SubMenu421</a></li>
<li><ahref="#">SubMenu422</a></li>
<li><ahref="#">SubMenu423</a></li>
<li><ahref="#">SubMenu424</a></li>
</ul>
</li>
<li><ahref="#">SubMenu43</a></li>
<li><ahref="#">SubMenu44</a></li>
</ul>
</li>
<li><ahref="#">ContactMe</a></li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。