JavaScript实现简单的二级导航菜单实例
本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBliC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css菜单演示</title>
<styletype="text/css">
<!--
*{margin:0;padding:0;border:0;}
body{
font-family:arial,宋体,serif;
font-size:12px;
}
#nav{
line-height:24px;list-style-type:none;background:#666;
}
#nava{
display:block;width:80px;text-align:center;
}
#nava:link{
color:#666;text-decoration:none;
}
#nava:visited{
color:#666;text-decoration:none;
}
#nava:hover{
color:#FFF;text-decoration:none;font-weight:bold;
}
#navli{
float:left;width:80px;background:#CCC;
}
#navlia:hover{
background:#999;
}
#navliul{
line-height:27px;list-style-type:none;text-align:left;
left:-999em;width:180px;position:absolute;
}
#navliulli{
float:left;width:180px;
background:#F6F6F6;
}
#navliula{
display:block;width:180px;width:156px;
text-align:left;padding-left:24px;
}
#navliula:link{
color:#666;text-decoration:none;
}
#navliula:visited{
color:#666;text-decoration:none;
}
#navliula:hover{
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#navli:hoverul{
left:auto;
}
#navli.sfhoverul{
left:auto;
}
#content{
clear:left;
}
-->
</style>
<scripttype=text/javascript>
<!--//--><![CDATA[//><!--
functionmenuFix(){
varsfEls=document.getElementById("nav").getElementsByTagName("li");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseDown=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseUp=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("(?|^)sfhover\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<ulid="nav">
<li><ahref="#">产品介绍</a>
<ul>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
</ul>
</li>
<li><ahref="#">服务介绍</a>
<ul>
<li><ahref="#">服务二</a></li>
<li><ahref="#">服务二</a></li>
<li><ahref="#">服务二</a></li>
<li><ahref="#">服务二服务二</a></li>
<li><ahref="#">服务二服务二服务二</a></li>
<li><ahref="#">服务二</a></li>
</ul>
</li>
<li><ahref="#">成功案例</a>
<ul>
<li><ahref="#">案例三</a></li>
<li><ahref="#">案例</a></li>
<li><ahref="#">案例三案例三</a></li>
<li><ahref="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><ahref="#">关于我们</a>
<ul>
<li><ahref="#">我们四</a></li>
<li><ahref="#">我们四</a></li>
<li><ahref="#">我们四</a></li>
<li><ahref="#">我们四111</a></li>
</ul>
</li>
<li><ahref="#">在线演示</a>
<ul>
<li><ahref="#">演示</a></li>
<li><ahref="#">演示</a></li>
<li><ahref="#">演示</a></li>
<li><ahref="#">演示演示演示</a></li>
<li><ahref="#">演示演示演示</a></li>
<li><ahref="#">演示演示</a></li>
<li><ahref="#">演示演示演示</a></li>
<li><ahref="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><ahref="#">联系我们</a>
<ul>
<li><ahref="#">联系联系联系联系联系</a></li>
<li><ahref="#">联系联系联系</a></li>
<li><ahref="#">联系</a></li>
<li><ahref="#">联系联系</a></li>
<li><ahref="#">联系联系</a></li>
<li><ahref="#">联系联系联系</a></li>
<li><ahref="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。