摘要： 当您在 Internet 上进行浏览时，到处都在使用各种类型的下拉菜单，但如果您曾经尝试创建过一种类型的下拉菜单的话，就会了解此过程可能并非总是非常简单。本文解释了创建您自己的下拉菜单所需的脚本和样式。
下拉菜单简介
Internet 上几乎每个站点都存在某种种类的下拉菜单。您可能会发现，简单的下拉菜单会在网页的上部水平排列，复杂些的会级联子菜单，有些使用带有鼠标停留效果的图形，还有一些在网页的左侧或右侧竖直排列。如果您想过在自己的网站使用下拉菜单的话，本文则会在您开始行动时有所帮助，并且会解释清楚一些看起来比较神秘的功能。
大多数下拉菜单都使用动态 HTML (DHTML) 来创建特殊的显示/隐藏行为。所有 DHTML 都从客户端脚本和 CSS 样式的组合中获取其特殊功能。通常，这就意味着当用户执行某个操作时，就会触发浏览器中的事件，从而导致浏览器运行一个脚本来更改一个或多个元素的显示属性。
本文讲述了下拉菜单的三种不同变化形式。您可以使用本文中的示例创建自己的下拉菜单。第一个示例是一个简单的下拉菜单。其他两个下拉菜单示例是第一个示例的变化形式：一个具有级联菜单，另一个使用图像。
注 “代码列表”部分中两个示例的代码位于本文结尾。对于第三个示例，则解释了如何修改其他两个示例中的一个。
本文中所有的下拉菜单示例都能在 Microsoft Internet Explorer 5.0 或更高版本中正常运行。简单下拉菜单的示例和带有图像的下拉菜单示例还能在 Opera、Mozilla 和 Netscape 浏览器中按预期运行。级联下拉菜单示例能在 Internet Explorer 和 Opera 中按预期运行，但是在 Mozilla 或 Netscape 浏览器中却不行。
另外，本文中的 HTML 示例使用下列 DOCTYPE。如果您指定不同的 DOCTYPE，该代码则可能无法按照预期或希望来运行。这种情况下，您可能需要对代码进行更改，以使其能够与不同的 DOCTYPE 一起正常运行。（有关详细信息，请参阅 Working with HTML DOCTYPE Declarations in FrontPage。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
创建简单下拉菜单
这个简单下拉菜单示例会在网页的上部产生一个水平菜单。当用户将鼠标指针指向每个菜单项时，浏览器都会显示一个下拉项列表项。图 1 显示了菜单在 Internet Explorer 中显示的方式。
图 1. 简单下拉菜单
下面的几节内容讲述了创建此下拉菜单所需的 HTML、JavaScript 和 CSS 代码。您在本文结尾处会发现该代码列表部分列出的完整代码。
注 用于创建本文中菜单的 HTML、脚本对象、属性、方法、事件和 CSS 属性的完整讨论不在本文范围之内。有关这些主题的详细信息，请参阅 MSDN Library 中 Web Development 部分的 HTML and Dynamic HTML 参考。
简单下拉菜单的 HTML 代码
该下拉菜单是使用表创建的。这个菜单表比较简单，如列表 1 中所示。
<table class="navbar" width="800">
<tr>
...[missing TD elements]
</tr>
</table>
列表 1. 主菜单栏表
该菜单表具有一个值为“navbar”的 class 属性，该属性与一个命名的样式类相关，width 属性设置为一个固定的像素度量：800。（如果您指定一个不同的度量或百分比，则可能需要更改表中各列的度量，这样可能会更改菜单在浏览器中显示时的行为方式。有关详细信息，请参阅 CLASS Attribute | className Property 和 WIDTH Attribute | width Property。）
该表由一行组成（TR Element | tr Object），该行包含了多个列（TD Element | td Object）。本文中的示例提供了五列，每列带有一个下拉菜单。每个下拉菜单都位于该菜单表中的一个 TD 元素内。
TD 元素中的代码使用 onmouseover 和 onmouseout 事件提供下拉菜单的正确显示和隐藏功能。（有关详细信息，请参阅 onmouseover Event 和 onmouseout Event。）列表 2 显示了该下拉菜单 TD 元素的代码。为了确保菜单使用简便，每个下拉菜单的代码都是完全相同的。
<td class="menuNormal" width="160"
>
<p>Menu 1</p>
...[missing DIV element]
</td>
列表 2. 下拉菜单 TD 元素
每个 TD 元素的 width 属性都设置为 160 像素，从而使得每个菜单都占表总宽度的 20%。如果您要添加或删除菜单或者更改表的宽度，则必须调整表中每个菜单的宽度。例如，如果您要删除该示例中的其中一列，以便拥有 4 列，则对于一个 800 像素宽的菜单来说，每个菜单的宽度必须为 200 像素。如果您要添加一个菜单，以便拥有 6 列，则这个宽度必须大约为 133 像素，依此类推。
每个下拉菜单都包含在一个 DIV 元素中，而该 DIV 元素又嵌套于每个顶级 TD 元素中。在该 DIV 元素中，每个下拉菜单的代码都包含于一个嵌套的 TABLE 元素中。列表 3 显示了嵌套的 DIV 和下拉菜单表。
<div class="menuNormal" width="155">
<table class="menu" width="155">
...[missing TR elements]
</table>
</div>
列表 3. 嵌入 DIV 和 TABLE 元素的下拉菜单
该下拉菜单的嵌套 DIV 元素有一个值为“menuNormal”的 class 属性，和一个值为“155”的 width 属性。嵌套的 TABLE 元素有一个值为“menu”的 class 属性，和一个值为“155”的 width 属性。
下拉菜单中的每一项组成了包含了一个 TD 元素的 TR 元素。列表 4 显示了下拉菜单行项的 TR 和 TD 元素。
<tr>
<td class="menuNormal"><a HREF="page.asp" class="menuitem">Item 1</a></td>
</tr>
列表 4. 下拉菜单项
每个菜单项的 TD 元素都有一个值为“menuNormal”的 class 属性。TD 元素中的文本包含在 A 元素中。（有关详细信息，请参阅 A Element | a Object。）该 A 元素指定了一个值为“menuitem”的 class 属性。menuitem 类样式使用 anchor 伪类定义链接、访问过的、悬停和活动样式。这就使得每个菜单项都具有一个悬停效果，而无需创建附加的 onmouseover 和 onmouseout 事件脚本。
简单下拉菜单的 JavaScript 函数
JavaScript 代码包含在一个名为 menu.js 的外部 JavaScript 文件中。该网页的 HEAD 部分包含了列表 5 中显示的代码，这些代码允许该网页访问该文件中包含的 JavaScript 代码。
<script language="javascript" src="menu.js"> </script>
列表 5. 外部 JavaScript 文件引用
【中国下载站】【设为主页】【收藏本页】【打印本文】【回到顶部】【关闭此页】
您现在的位置：
减小字体
增大字体