文件夹式的菜单

使用提示

本例是个很好用的范例。代码复制后会生成几个表格，可以在直接在视图编辑状态下修改表格的属性及表格中的内容。

文件夹式的菜单

演示效果：

关于本站返回首页返回目录赏心悦目

本网站是为广大的网页设计者服务的网站。网站收集了大量的网页素材、JSP编程、图形特效、JavaST特效和网页制作工具的使用方法。　另外，网站还收集了一些精美的图片和音乐供你欣赏。

去首页看看微风吹拂，竹叶轻摇的特效。

返回首页

本页从上千个网页特效中精选了300多个实用的网页特效。对每个特效我们都做了严格的测试，相信一定能对你的网页制作起到一定作用。

返回目录

你浏览本网站辛苦了，休息一会，去到本站的赏心悦目找个美眉让她看看你。赏心悦目

代码提示：将下面代码复制到<BODY>中

//修改下面的样式表属性
<STYLE type=text/css>.sec1 {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #FF99CC
}
.sec2 {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #FFE1F5
}
.main_tab {
	BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #FFE1F5
}
</STYLE>

<SCRIPT language=javascript>
     function secBoard(n)
  {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
    mainTable.tBodies[n].style.display="block";
  }
      </SCRIPT>

            
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=300 border=0 class="css3">
  <TBODY> 
  <TR align=middle height=20>
                
    <TD class=sec2 onclick=secBoard(0) width="10%">关于本站</TD>
                
    <TD class=sec1 onclick=secBoard(1) width="10%">返回首页</TD>
                
    <TD class=sec1 onclick=secBoard(2) width="10%">返回目录</TD>
                
    <TD class=sec1 onclick=secBoard(3) 
              width="10%">赏心悦目</TD>
  </TR></TBODY></TABLE>
            
<TABLE class=main_tab id=mainTable height=180 cellSpacing=0 
            cellPadding=0 width=300 border=0>
  
  <TBODY style="DISPLAY: block"> 
  <TR>
                <TD vAlign=top align=middle><BR><BR>
                  
      <TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
        <TBODY> 
        <TR> 
                      <TD class="css3">本网站是为广大的网页设计者服务的网站。网站收集了大量的网页素材、JSP编程、图形特效、JavaST特效和网页制作工具的使用方法。　另外，网站还收集了一些精美的图片和音乐供你欣赏<font size="2"><font color="#000000">。</font></font><BR>
            <BR>
          </TD>
        </TR>
        </TBODY>
      </TABLE>
    </TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  
      <TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
        <TBODY> 
        <TR> 
                      <TD class="css3">
                        <p>去首页看看微风吹拂，竹叶轻摇的特效。</p>
                        <p><a href="../../index.asp">返回首页</a><BR>
                          <BR>
                        </p>
                      </TD>
        </TR>
        </TBODY>
      </TABLE>
    </TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  
      <TABLE cellSpacing=0 cellPadding=0 width=291 border=0>
        <TBODY> 
        <TR> 
                      <TD class="css3">
                        <p>本页从上千个网页特效中精选了300多个实用的网页特效。对每个特效我们都做了严格的测试，相信一定能对你的网页制作起到一定作用。</p>
                        <p><a href="../wytx.htm">返回目录</a><BR>
                          <BR>
                        </p>
                      </TD>
        </TR>
        </TBODY>
      </TABLE>
    </TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
      <table cellspacing=0 cellpadding=0 width=291 border=0>
        <tbody> 
        <tr> 
                      <td class="css3">你浏览本网站辛苦了，休息一会，去到本站的赏心悦目找个美眉让她看看你。<a href="../../sxym/sxym.htm">赏心悦目</a><br>
                        <img src="../../sxym/renwu/image/015s.jpg" width="140" height="105"> 
                        <img src="../../sxym/renwu/image/013s.jpg" width="140" height="105"> 
                      </td>
        </tr>
        </tbody> 
      </table>
    </TD>
  </TR></TBODY></TABLE>

使用提示　　　返回目录