代码
- <!–把如下代码复制到<head>与</head>之间 –>
- <html><head>
- <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: #eeeeee;}
- .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: #d4d0c8;}
- .main_tab {BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8;}
- </style>
- </head>
- <!–把如下代码复制到<body>与</body>之间–>
- <body>
- <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=549 border=0>
- <TBODY>
- <TR align=middle height=20>
- <TD class=sec2 onMouseOver=secBoard(0) width="10%">菜单一</TD>
- <TD class=sec1 onMouseOver=secBoard(1) width="10%">菜单二</TD>
- <TD class=sec1 onMouseOver=secBoard(2) width="10%">菜单三</TD>
- <TD class=sec1 onMouseOver=secBoard(3) width="10%">菜单四</TD>
- </TR>
- </TBODY>
- </TABLE>
- <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
- <!–菜单一内容–>
- <TBODY style="DISPLAY: block">
- <TR>
- <TD vAlign=top align=middle>
- <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
- <TBODY>
- <TR>
- <TD><a href="http://www.xiaoyebailong.com" target="_blank">小叶白龙特效库 – 背景按钮特效</a></TD>
- </TR>
- </TBODY>
- </TABLE>
- </TD>
- </TR>
- </TBODY>
- <!–菜单二内容–>
- <TBODY style="DISPLAY: none">
- <TR>
- <TD vAlign=top align=middle>
- <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
- <TBODY>
- <TR>
- <TD><a href="http://www.3zha.com/bjx" target="_blank">小叶白龙特效库 – 导航菜单特效</a></TD>
- </TR>
- </TBODY>
- </TABLE>
- </TD>
- </TR>
- </TBODY>
- <!–菜单三内容–>
- <TBODY style="DISPLAY: none">
- <TR>
- <TD vAlign=top align=middle>
- <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
- <TBODY>
- <TR>
- <TD><a href="http://www.3zha.com/love" target="_blank">小叶白龙特效库 – 网页图片特效</a></TD>
- </TR>
- </TBODY>
- </TABLE>
- </TD>
- </TR>
- </TBODY>
- <!–菜单四内容–>
- <TBODY style="DISPLAY: none">
- <TR>
- <TD vAlign=top align=middle>
- <TABLE cellSpacing=0 cellPadding=40 width=490 border=0>
- <TBODY>
- <TR>
- <TD><a href="http://www.3zha.com/head" target="_blank">小叶白龙特效库 – 另类网页特效</a></TD>
- </TR>
- </TBODY>
- </TABLE>
- </TD>
- </TR>
- </TBODY>
- </TABLE>
- </body>
- </html>
- <!–使用说明：导航菜单的样式可在<head>代码部分进行修改，导航菜单的内容可在<body>代码部分修改，如需将菜单改为点击式的，只需将<body>代码部分中的onMouseOver改为onclick即可，如需在一个网页中重要放置此导航菜单，只需再次复制<body>代码部分然后粘贴到网页中，但粘贴前需要查找替换将<body>代码部分的secBoard、secTable、mainTable三个字符串进行修改，如改为：secBoard2、secTable2、mainTable2。–>
