设为首页 | 加入收藏
当前位置:首页>>网页特效>>页面导航特效>> 多层导航菜单

多层导航菜单

时间:2005-1-14 22:03:06 来源:本站收集整理 作者:佚名

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

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

<style type=text/css>TABLE{COLOR:#ffff00;FONT-FAMILY:宋体,serif;FONT-SIZE:9pt}</style>


第二步：把如下代码加入到<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>&nbsp;<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>&nbsp;<A href=link.htm>总类目一</A><IMG border=0 height=11 src=../wydh/images/go.gif width=16><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>&nbsp;<A href=link.htm>总类目二</A><IMG border=0 height=11 src=../wydh/images/go.gif width=16><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>&nbsp;<A href=link.htm>总类目三</A><IMG border=0 height=11 src=../wydh/images/go.gif width=16><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>&nbsp;<A href=link.htm>总类目四</A><IMG border=0 height=11 src=../wydh/images/go.gif width=16><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>&nbsp;<A href=link.htm>总类目五</A><IMG border=0 height=11 src=../wydh/images/go.gif width=16><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>&nbsp;<A href="link.htm"">总类目六</A><IMG
            border=0 height=11 src="../wydh/images/go.gif" width=16><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>&nbsp;<A
            href="link.htm">总类目七</A><IMG border=0
            height=11 src="../wydh/images/go.gif" width=16><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>&nbsp;<A
            href="link.htm">总类目八</A><IMG
            border=0 height=11 src="../wydh/images/go.gif" width=16><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>