p; <tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Subitem 5</a></td></tr>
</table>
</div>
</td>
<!-- SUBMENU 4 END -->
</tr>
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 3</a></td></tr>
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 4</a></td></tr>
</table>
</div>
</td>
<!-- MENU 4 END -->
<!-- MENU 5 START -->
<td class="menuNormal" width="160" onmouseover="expand(this);" onmouseout=
"collapse(this);">
<p>Menu 5</p>
<div class="menuNormal" width="155">
<table class="menu" width="155">
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 1</a></td></tr>
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 2</a></td></tr>
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 3</a></td></tr>
<tr><td class="menuNormal"><a HREF="page.asp" class="menuitem">
Item 4</a></td></tr>
</table>
</div>
</td>
<!-- MENU 5 END -->
</tr>
</table>
<!-- MAIN MENU END -->
</body>
</html>
图 15. 带有级联子菜单的下拉菜单
下拉菜单的完整 JavaScript
本文中的所有菜单示例都使用相同的脚本文件。Menu.js 文件的代码如列表 16 所示。
注 请确保将文件保存为“menu.js”。如果使用另外一个文件名，则必须在菜单示例的网页中更改对它的引用。如果不进行更改，您的菜单则无法按照本文所示的内容运行。
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
function collaps << 上一页 [11] [12] 下一页
|
您现在的位置： 卓越设计网 >> 网页制作 >> FrontPages >> 网页制作正文
