多层导航菜单

作者：佚名来源：不详发布时间：2006-10-29 0:23:28 发布人：admin

要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

第二步：把如下代码加入到<body>区域中

<BODY bgColor=#000000 text=#33FF33 link=#33FF33 vlink=#33FF33 alink=#33FF33><table border=0 cellpadding=0 cellspacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><tbody><tr><td valign=bottom colspan=2> <div align=center><a href=link.htm onMouseOver=MM_showHideLayers('1',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('2',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('3',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('4',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('5',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('6',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('7',1)>导航类目</a> | <a href=link.htm onMouseOver=MM_showHideLayers('8',1)>导航类目</a>|</div></td></tr></tbody></table><DIV id=layer1 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href=link.htm>总类目一</A><img src=http://www.netton.cn/wydh/images/go.gif width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A href=link.htm>分类目一</A>，<A href=link.htm>分类目二</A>，<A href=link.htm>分类目三</A>，<A href=link.htm>分类目四</A>，<A href=link.htm>分类目五</A>，<A href=link.htm>分类目六</A>，<A href=link.htm>分类目七</A>，<A href=link.htm>分类目八</A>；</TD></TR></TBODY></TABLE></DIV><DIV id=layer2 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href=link.htm>总类目二</A><img src=http://www.netton.cn/wydh/images/go.gif width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A href=link.htm>分类目一</A>，<A href=link.htm>分类目二</A>，<A href=link.htm>分类目三</A>，<A href=link.htm>分类目四</A>，<A href=link.htm>分类目五</A>，<A href=link.htm>分类目六</A>，<A href=link.htm>分类目七</A>，<A href=link.htm>分类目八</A>；</TD></TR></TBODY></TABLE></DIV><DIV id=layer3 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href=link.htm>总类目三</A><img src=http://www.netton.cn/wydh/images/go.gif width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A href=link.htm>分类目一</A>，<A href=link.htm>分类目二</A>，<A href=link.htm>分类目三</A>，<A href=link.htm>分类目四</A>，<A href=link.htm>分类目五</A>，<A href=link.htm>分类目六</A>，<A href=link.htm>分类目七</A>，<A href=link.htm>分类目八</A>；</TD></TR></TBODY></TABLE></DIV><DIV id=layer4 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href=link.htm>总类目四</A><img src=http://www.netton.cn/wydh/images/go.gif width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A href=link.htm>分类目一</A>，<A href=link.htm>分类目二</A>，<A href=link.htm>分类目三</A>，<A href=link.htm>分类目四</A>，<A href=link.htm>分类目五</A>，<A href=link.htm>分类目六</A>，<A href=link.htm>分类目七</A>，<A href=link.htm>分类目八</A>；</TD></TR></TBODY></TABLE></DIV><DIV id=layer5 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href=link.htm>总类目五</A><img src=http://www.netton.cn/wydh/images/go.gif width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A href=link.htm>分类目一</A>，<A href=link.htm>分类目二</A>，<A href=link.htm>分类目三</A>，<A href=link.htm>分类目四</A>，<A href=link.htm>分类目五</A>，<A href=link.htm>分类目六</A>，<A href=link.htm>分类目七</A>，<A href=link.htm>分类目八</A>；</TD></TR></TBODY></TABLE></DIV><DIV id=layer6 style=LEFT:9px;POSITION:absolute;TOP:65px;VISIBILITY:hidden;Z-INDEX:1><TABLE border=0 cellPadding=0 cellSpacing=0 height=20 style="BACKGROUND-COLOR:#3333cc;BORDER-BOTTOM:#0066ff 2px outset;BORDER-LEFT:#0066ff 2px outset;BORDER-RIGHT:#0066ff 2px outset;BORDER-TOP:#0066ff 2px outset" width=760><TBODY><TR vAlign=top><TD style=LINE-HEIGHT:15px vAlign=bottom> <A href="link.htm"">总类目六</A><img src="http://www.netton.cn/wydh/images/go.gif" width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A 
            href="link.htm" >分类目一</A>，<A 
            href="link.htm" >分类目二</A>，<A 
            href="link.htm" >分类目三</A>，<A 
            href="link.htm" >分类目四</A>，<A 
            href="link.htm" >分类目五</A>，<A 
            href="link.htm" >分类目六</A>，<A 
            href="link.htm" >分类目七</A>，<A 
            href="link.htm" >分类目八</A>；</TD></TR></TBODY></TABLE></DIV>
      <DIV id=layer7 
      style="LEFT: 9px; POSITION: absolute; TOP: 65px; VISIBILITY: hidden; Z-INDEX: 1"> 
        <TABLE border=0 cellPadding=0 cellSpacing=0 height=20 
      style="BACKGROUND-COLOR: #3333cc; BORDER-BOTTOM: #0066ff 2px outset; BORDER-LEFT: #0066ff 2px outset; BORDER-RIGHT: #0066ff 2px outset; BORDER-TOP: #0066ff 2px outset" 
      width=760>
        <TBODY>
        <TR vAlign=top>
          <TD style="LINE-HEIGHT: 15px" vAlign=bottom> <A 
            href="link.htm">总类目七</A><img src="http://www.netton.cn/wydh/images/go.gif" width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A 
            href="link.htm" >分类目一</A>，<A 
            href="link.htm" >分类目二</A>，<A 
            href="link.htm" >分类目三</A>，<A 
            href="link.htm" >分类目四</A>，<A 
            href="link.htm" >分类目五</A>，<A 
            href="link.htm" >分类目六</A>，<A 
            href="link.htm" >分类目七</A>，<A 
            href="link.htm" >分类目八</A>；</TD></TR></TBODY></TABLE></DIV>
      <DIV id=layer8 
      style="LEFT: 9px; POSITION: absolute; TOP: 65px; VISIBILITY: hidden; Z-INDEX: 1"> 
        <TABLE border=0 cellPadding=0 cellSpacing=0 height=20 
      style="BACKGROUND-COLOR: #3333cc; BORDER-BOTTOM: #0066ff 2px outset; BORDER-LEFT: #0066ff 2px outset; BORDER-RIGHT: #0066ff 2px outset; BORDER-TOP: #0066ff 2px outset" 
      width=760>
        <TBODY>
        <TR vAlign=top>
          <TD style="LINE-HEIGHT: 15px" vAlign=bottom> <A 
            href="link.htm">总类目八</A><img src="http://www.netton.cn/wydh/images/go.gif" width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><A 
            href="link.htm" >分类目一</A>，<A 
            href="link.htm" >分类目二</A>，<A 
            href="link.htm" >分类目三</A>，<A 
            href="link.htm" >分类目四</A>，<A 
            href="link.htm" >分类目五</A>，<A 
            href="link.htm" >分类目六</A>，<A 
            href="link.htm" >分类目七</A>，<A 
            href="link.htm" >分类目八</A>；</TD></TR></TBODY></TABLE></DIV>
      <Script language=javascript>rckarr= new Array(50);rckarr[0]=new rck('1');rckarr[1]=new rck('2');rckarr[2]=new rck('3');rckarr[3]=new rck('4');rckarr[4]=new rck('5');rckarr[5]=new rck('6');rckarr[6]=new rck('7');rckarr[7]=new rck('8');function rck(id){this.id=id;}rckcnt = 8;</Script>
      <Script>
function MM_showHideLayers(i,n) { //v3.0
     for ( l=0; l<rckcnt ; l++ )
    {
        choice=eval("layer"+rckarr[l].id);
        choice.style.visibility = 'hidden';
    } 
     if (n ==1){
        choice=eval("layer"+i);
        choice.style.visibility = 'visible';
    }
}
</script>
    </TD>
  </TR>
</TBODY>

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：不错的WINDOWS导航条

下一篇代码：鼠标指向链接时在固定位置出现说明文字

多层导航菜单

精品推荐

代码分类

阅读排行

相关代码