使用 JavaScript 创建 FrontPage 下拉菜单
发布日期： 1/28/2005 | 更新日期： 1/28/2005
Lisa Wollin
Microsoft Corporation
适用于：
Microsoft Office FrontPage 2003
Microsoft FrontPage 2002
Microsoft FrontPage 2000
摘要： 当您在 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 。）
返回页首
创建简单下拉菜单
这个简单下拉菜单示例会在网页的上部产生一个水平菜单。当用户将鼠标指针指向每个菜单项时，浏览器都会显示一个下拉项列表项。图 1 显示了菜单在 Internet Explorer 中显示的方式。
图 1. 简单下拉菜单
下面的几节内容讲述了创建此下拉菜单所需的 HTML、JavaScript 和 CSS 代码。您在本文结尾处会发现该代码列表部分列出的完整代码。
注 用于创建本文中菜单的 HTML、脚本对象、属性、方法、事件和 CSS 属性的完整讨论不在本文范围之内。有关这些主题的详细信息，请参阅 MSDN Library 中 Web Development 部分的 HTML and Dynamic HTML 参考。
简单下拉菜单的 HTML 代码
该下拉菜单是使用表创建的。这个菜单表比较简单，如列表 1 中所示。
1<table class="navbar" width="800">
2<tr>
3 ...[missing TD elements]
4 </tr>
5</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 元素的代码。为了确保菜单使用简便，每个下拉菜单的代码都是完全相同的。
1<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
2<p>Menu 1</p>
3 ...[missing DIV element]
4 </td>
列表 2. 下拉菜单 TD 元素
每个 TD 元素的 width 属性都设置为 160 像素，从而使得每个菜单都占表总宽度的 20%。如果您要添加或删除菜单或者更改表的宽度，则必须调整表中每个菜单的宽度。例如，如果您要删除该示例中的其中一列，以便拥有 4 列，则对于一个 800 像素宽的菜单来说，每个菜单的宽度必须为 200 像素。如果您要添加一个菜单，以便拥有 6 列，则这个宽度必须大约为 133 像素，依此类推。
每个下拉菜单都包含在一个 DIV 元素中，而该 DIV 元素又嵌套于每个顶级 TD 元素中。在该 DIV 元素中，每个下拉菜单的代码都包含于一个嵌套的 TABLE 元素中。列表 3 显示了嵌套的 DIV 和下拉菜单表。
1<div class="menuNormal" width="155">
2<table class="menu" width="155">
3 ...[missing TR elements]
4 </table>
5</div>
列表 3. 嵌入 DIV 和 TABLE 元素的下拉菜单
该下拉菜单的嵌套 DIV 元素有一个值为“menuNormal”的 class 属性，和一个值为“155”的 width 属性。嵌套的 TABLE 元素有一个值为“menu”的 class 属性，和一个值为“155”的 width 属性。
下拉菜单中的每一项组成了包含了一个 TD 元素的 TR 元素。列表 4 显示了下拉菜单行项的 TR 和 TD 元素。
1<tr>
2<td class="menuNormal"><a class="menuitem" href="page.asp">Item 1</a></td>
3</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 代码。
1<script language="javascript" src="menu.js"> </script>
列表 5. 外部 JavaScript 文件引用
该外部 JavaScript 文件包含了两个函数：一个用于展开菜单 (expand)，一个用于折叠菜单 (collapse)。下面的几节内容讲述了这个 expand 和 collapse 函数。
Expand 函数
Expand 函数（列表 6）是发生显示操作的位置。Expand 函数采用一个参数：顶级菜单 TD 元素的引用。用于菜单显示的所有格式都包含在 CSS 类中，因此该 expand 函数只是为 TD 元素和第一个嵌套 DIV 元素的 className 属性分配合适的 CSS 类名 。提供显示下拉菜单所必需格式的 CSS 类的名称为“menuHover”，将在下面部分进行详细说明。
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
列表 6. Expand 函数
Collapse 函数
Collapse 函数（列表 7）是发生隐藏操作的位置。Collapse 函数采用一个参数：顶级菜单 TD 元素的引用。用于菜单显示的所有格式都包含在 CSS 类中，与 expand 函数相同，该 collapse 函数也只是为 TD 元素和第一个嵌套 DIV 元素的 className 属性分配合适的 CSS 类名。将该菜单返回其原始格式的 CSS 类的名称为“menuNormal”，将在下面部分进行详细说明。
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
d.className = "menuNormal";
}
列表 7. Collapse 函数
简单下拉菜单的 CSS 样式
外部 CSS 文件 menu.css 包含了列表 8 中显示的常规 CSS 格式，这些格式用于网页的正文以及 P 和 H1 元素。您可以将这些样式更改为您选择的任何格式；但您要知道，更改这些样式可能会影响菜单在浏览器中显示时的显示方式，并且可能需要对 menuNormal 和 menuHover 类进行附加更改。
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;}
P
{padding-top: 10px;
margin: 0px;}
H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}
列表 8. 基本网页格式样式
除了网页的基本格式之外，本文中的菜单还使用了列表 9 中显示的两个常规 CSS 类样式：一个是 table.navbar，它设置主菜单表的显示；另一个是 table.menu，它则设置嵌套菜单表的显示。这些类样式指定字体大小和粗细；它们还会删除可能已经应用于全局 TABLE 元素样式的任何填充、边距或边框。
table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}
table.menu
{font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;}
列表 9. 常规菜单栏类样式
该下拉菜单 TD 元素和嵌套 DIV 元素使用列表 10 中显示的 4 个类。这些类为处于其正常 onmouseout 状态和展开 onmouseover 状态的菜单提供了显示格式。这些类指定背景和文本颜色，以及单元格填充、字体粗细和竖直对齐的变化。
TD 元素的 menuNormal 和 menuHover 类之间的主要区别在于背景颜色：正常 onmouseout 状态使用白色背景色，展开的 onmouseover 状态使用淡蓝色背景色。
单个菜单项的 TD 元素也使用 menuNormal 类指定它们正常、静态的格式；但是这些元素不使用 menuHover 类。而是由下面部分讲述的 menuitem 类为单个的菜单项提供鼠标停留格式。
DIV 元素的 menuNormal 和 menuHover 类指定显示和隐藏 DIV 元素及其内容所需的格式。下拉菜单 DIV 元素的正常 onmouseout 状态是隐藏的，因此 DIV 元素的 menuNormal 类不指定其他任何格式，而只是将显示属性设置为无，这对于隐藏 DIV 元素是必需的。
DIV 元素的展开 onmouseover 状态提供了一些基本格式，可设置下拉菜单的边框和背景色。另外，display 属性设置为 inline。对于本文前面讲述的简单下拉菜单，display 属性可以设置为 block；但是为了在 Opera 和 Mozilla 浏览器中将一个级联子菜单（下面部分讲述）正确定位到菜单项文本的左侧，将 display 属性设置为 inline。最后，将 position 属性设置为 absolute。这样会导致 DIV 元素的显示好像覆盖了网页上的文本和图像一样；设置为一个不同的值会将网页上的内容向下推，从而为 DIV 元素及其内容腾出地方。
td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;}
td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}
div.menuNormal
{display: none;}
div.menuHover
{border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;}
列表 10. 下拉菜单正常和展开类样式
最后，如前所述，本文中的菜单使用 anchor 伪类为该下拉菜单和级联菜单中包含的每个菜单项提供鼠标停留效果。这些类提供菜单项悬停效果，无需任何附加的脚本。列表 11 中的 anchor 伪类适用于所有类属性值为“menuitem”的 A 元素。
a.menuitem:link
{text-decoration: none;
color: black;
background-color: white;
display: block;}
a.menuitem:visited
{text-decoration: none;
color: black;
background-color: white;
display: block;}
a.menuitem:hover
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}
a.menuitem:active
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}
列表 11. 各个菜单项样式
在外部 CSS 文件的代码列表部分，您会发现该 CSS 的完整列表。
返回页首
简单下拉菜单的变化形式
本文提供了该简单下拉菜单示例的两个变化形式，但是您自己可能设计出很多种变化形式。下面的部分是一些代码和说明，您可以使用这些内容来创建级联下拉菜单或使用图像的顶级菜单项。
创建级联下拉菜单
这些级联下拉菜单变化形式与上述简单下拉菜单使用相同的基本结构：一个 DIV 元素带有嵌套的 TABLE 元素，该 TABLE 元素还包含一个项列表。图 2 显示了级联菜单在 Internet Explorer 中显示时的显示方式。
图 2. 级联下拉菜单
您可以按照下面部分讲述的方式更改 HTML，修改该简单下拉菜单，从而创建级联效果。
级联下拉菜单的 HTML 代码
正如前面所述，下拉菜单中每个行项的代码都包含在一个 TD 元素中。每个 TD 元素都代表菜单中的一个行项，因此每个 TD 元素都包含在一个 TR 元素中。列表 12 中显示的是一个菜单项的代码，我们来回顾一下。
1<tr>
2<td class="menuNormal"><a class="menuitem" href="page.asp">Item 1</a></td>
3</tr>
列表 12. 行项 TD 元素
级联菜单与该简单下拉菜单使用同样的脚本和样式，因此您要创建级联子菜单，所需的操作只是使用一个包含了与顶级 TD 元素相同的 HTML 的 TD 元素来替换单个的菜单项 TD 元素。基本来讲，就是使用列表 13 中显示的 TD 元素替换列表 12 中的 TD 元素。
1<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
2 Menu ...
3 <div class="menuNormal" width="155">
4<table class="menu" width="155">
5<tr>
6<td class="menuNormal"><a class="menuitem" href="page.asp">Item 1</a></td>
7</tr>
8 ...[missing TR elements]
9 </table>
10 ...[missing code]
11 </div>
12</td>
列表 13. 级联菜单 TD 元素
您可能已经注意到，此代码与前面部分显示的，用于简单下拉菜单的代码完全相同，但是有一个差别。要将级联菜单放置在菜单项文本的旁边（而不是像顶级下拉菜单那样放在下面），您需要从菜单项文本两边删除开始和结束
1<p> 标记，然后在最后添加一个省略号。
2
3**注** 省略号只是表示该菜单项会引出一个子菜单。您可以将省略号替换为图形或另外一个符号。
4
5**创建级联子菜单**
6
7使用同样的简单 HTML，您可以通过将各个行项的 TD 元素替换为级联菜单的 TD 元素（如前面的列表 13 所示），添加所需的任意多级的级联子菜单。这就表示您可以创建包含级联子菜单的下拉菜单，而级联子菜单又可以包含另一个级联子菜单（如图 3 所示），无所穷尽。
8
9
10
11
12**图** **3.** **带有多个级联子菜单的下拉菜单**
13
14**创建带有图像的下拉菜单**
15
16要向本文中的简单下拉菜单添加图像，使用 FrontPage 中的交互式按钮功能会相对简单一些。图 4 显示了添加交互式按钮之后，本文前面部分讲述的简单下拉菜单在 Internet Explorer 中的显示方式。
17
18
19
20
21**图** **4.** **带有图像的下拉菜单**
22
23添加了按钮之后，您需要对一个 CSS 类进行一些更改才能删除背景色。下面的步骤解释了如何使用 FrontPage 中的交互式按钮功对前面讲述的简单下拉菜单进行修改，使其使用图像。
24
25**注** 您可以使用自己的图像来代替交互式按钮功能中的按钮图像。但是，交互式按钮功能提供了可为图像创建鼠标停留效果的 **onmouseover** 和 **onmouseout** 事件脚本。本文没有包括这个图像鼠标停留脚本。
26
271\.
28
29|
30
31在 FrontPage 中创建一个网页，然后切换到“代码”视图。
32
33---|---
34
352\.
36
37|
38
39复制粘贴列表 14 中的 HTML 代码 （ 简单下拉菜单的完整 HTML ），替换该网页中现有的代码。
40
413\.
42
43|
44
45在“设计”视图中，高亮显示第一个单元格中的文本（“Menu 1”），然后按 **Delete** 。
46
474\.
48
49|
50
51在 **Insert** 菜单上，单击 **Interactive Button** 。
52
535\.
54
55|
56
57滚动查看按钮列表，选择您选择的按钮。本文中的示例使用“Glass Capsule 1”。
58
596\.
60
61|
62
63在 **Text** 字段中，键入“Menu 1”。对于真正的菜单，您应该键入想要显示在该菜单上的文本，但是对于此示例，请使用这个通用文本。
64
657\.
66
67|
68
69顶级菜单项没有链接，因此请保持 **Link** 字段为空。
70
718\.
72
73|
74
75单击 **OK** 。
76
779\.
78
79|
80
81当您使用 FrontPage 中的交互式按钮插入按钮时，FrontPage 会在该按钮 <img/> 标记两侧插入 <p> 标记。切换到“代码”视图，从交互式按钮图像删除开始和结束 <p> 标记。
82
8310\.
84
85|
86
87重复第 2 到第 9 步，对于五个顶级菜单项，每一个都将文本替换为图像。完成时，您应该会看到网页上排列着五个按钮图像，在这些按钮图像下面显示下拉菜单。
88
8911\.
90
91|
92
93将该网页保存为 menu.htm。
94
9512\.
96
97|
98
99在 FrontPage 中创建一个网页，然后切换到“代码”视图。
100
10113\.
102
103|
104
105复制粘贴列表 16 中的 JavaScript 代码 （ 下拉菜单的完整 HTML ），替换该网页中的代码。
106
10714\.
108
109|
110
111将该文件保存为 menu.js，并使其与前面创建的 menu.htm 文件位于相同的文件夹中。
112
11315\.
114
115|
116
117在 FrontPage 中创建一个网页，然后切换到“代码”视图。
118
11916\.
120
121|
122
123复制粘贴列表 17 中的 CSS 代码 （ 下拉菜单的完整外部级联样式表 ），替换该网页中现有的代码。
124
12517\.
126
127|
128
129删除 td.menuHover 类中的下列文本，或将其注释掉。（请注意，此行前面一行中的注释告诉您在创建带有图像的下拉菜单时删除此行。）
130
131
132 background-color: lightblue;
133
134
13518\.
136
137|
138
139将该文件保存为 menu.css，并使其与前面创建的 menu.htm 文件位于相同的文件夹中。
140
141完成之后，在浏览器中预览该网页，并测试这些菜单。
142
143 返回页首
144
145## 下拉菜单的代码列表
146
147本文中包括的下列代码列表可帮助您创建一个工作示例，当您创建自己的级联菜单解决方案时可以以此为起点。您可以将下面任意的代码列表复制粘贴到 FrontPage 中的网页中，以创建工作示例。
148
149### 简单下拉菜单的完整 HTML
150
151简单下拉菜单的代码如列表 14 所示。
152
153
154 <html>
155<head>
156<link href="menu.css" rel="StyleSheet"/>
157<script language="javascript" src="menu.js"></script>
158</head>
159<body>
160<h1 align="center">Main Heading</h1>
161<table class="navbar" width="800">
162<tr>
163<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
164<p>Menu 1</p>
165<div class="menuNormal" width="155">
166<table class="menu" width="155">
167<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 1>/a></td></tr>
168<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 2>/a></td></tr>
169<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 3>/a></td></tr>
170<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 4>/a></td></tr>
171</table>
172</div>
173</td>
174<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
175<p>Menu 2</p>
176<div class="menuNormal" width="155">
177<table class="menu" width="155">
178<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 1>/a></td></tr>
179<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 2>/a></td></tr>
180<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 3>/a></td></tr>
181<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 4>/a></td></tr>
182</table>
183</div>
184</td>
185<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
186<p>Menu 3</p>
187<div class="menuNormal" width="155">
188<table class="menu" width="155">
189<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 1>/a></td></tr>
190<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 2>/a></td></tr>
191<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 3>/a></td></tr>
192<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 4>/a></td></tr>
193</table>
194</div>
195</td>
196<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
197<p>Menu 4</p>
198<div class="menuNormal" width="155">
199<table class="menu" width="155">
200<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 1>/a></td></tr>
201<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 2>/a></td></tr>
202<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 3>/a></td></tr>
203<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 4>/a></td></tr>
204</table>
205</div>
206</td>
207<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
208<p>Menu 5</p>
209<div class="menuNormal" width="155">
210<table class="menu" width="155">
211<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 1>/a></td></tr>
212<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 2>/a></td></tr>
213<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 3>/a></td></tr>
214<tr><td class="menuNormal">>a HREF="page.asp" class="menuitem">Item 4>/a></td></tr>
215</table>
216</div>
217</td>
218</tr>
219</table>
220</body>
221</html>
222
223
224**列表** **14.** **简单下拉菜单**
225
226### 带有级联子菜单的下拉菜单的完整 HTML
227
228带有级联子菜单的下拉菜单的代码如列表 15 所示。
229
230
231 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
232
233<html>
234<head>
235<link href="menu.css" rel="StyleSheet"/>
236<script language="javascript" src="menu.js"></script>
237</head>
238<body>
239<h1 align="center">Main Heading</h1>
240<!-- MAIN MENU START -->
241<table class="navbar" width="800">
242<tr>
243<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
244<p>Menu 1</p>
245<div class="menuNormal" width="155">
246<table class="menu" width="155">
247<tr>
248<!-- SUBMENU 1 START -->
249<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="154">Item 1 ...
250 <div class="menuNormal" width="150">
251<table class="menu" width="150">
252<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
253 Subitem 1</a></td></tr>
254<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
255 Subitem 2</a></td></tr>
256<tr>
257<!-- SUB SUBMENU START -->
258<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);
259 " width="154">Subitem 3 ...
260 <div class="menuNormal" width="150">
261<table class="menu" width="150">
262<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Subitem 1</a></td></tr>
263<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Subitem 2</a></td></tr>
264<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Subitem 3</a></td></tr>
265<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Subitem 4</a></td></tr>
266<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Subitem 5</a></td></tr>
267</table>
268</div>
269</td>
270<!-- SUB SUBMENU END -->
271</tr>
272<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
273 Subitem 4</a></td></tr>
274<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
275 Subitem 5</a></td></tr>
276</table>
277</div>
278</td>
279<!-- SUBMENU 1 END -->
280</tr>
281<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Item 2</a></td></tr>
282<tr><td class="menuNormal"><a class="menuitem" href="page.asp">Item 3</a></td></tr>
283<tr>
284<!-- SUBMENU 2 START -->
285<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="154">Item 4 ...
286 <div class="menuNormal" width="150">
287<table class="menu" width="150">
288<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
289 Subitem 1</a></td></tr>
290<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
291 Subitem 2</a></td></tr>
292<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
293 Subitem 3</a></td></tr>
294<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
295 Subitem 4</a></td></tr>
296<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
297 Subitem 5</a></td></tr>
298</table>
299</div>
300</td>
301<!-- SUBMENU 2 END -->
302</tr>
303</table>
304</div>
305</td>
306<!-- MENU 1 END -->
307<!-- MENU 2 START -->
308<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
309<p>Menu 2</p>
310<div class="menuNormal" width="155">
311<table class="menu" width="155">
312<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
313 Item 1</a></td></tr>
314<tr>
315<!-- SUBMENU 3 START -->
316<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="154">Item 2 ...
317 <div class="menuNormal" width="150">
318<table class="menu" width="150">
319<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
320 Subitem 1</a></td></tr>
321<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
322 Subitem 2</a></td></tr>
323<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
324 Subitem 3</a></td></tr>
325<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
326 Subitem 4</a></td></tr>
327<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
328 Subitem 5</a></td></tr>
329</table>
330</div>
331</td>
332<!-- SUBMENU 3 END -->
333</tr>
334<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
335 Item 3</a></td></tr>
336<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
337 Item 4</a></td></tr>
338</table>
339</div>
340</td>
341<!-- MENU 2 END -->
342<!-- MENU 3 START -->
343<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
344<p>Menu 3</p>
345<div class="menuNormal" width="155">
346<table class="menu" width="155">
347<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
348 Item 1</a></td></tr>
349<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
350 Item 2</a></td></tr>
351<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
352 Item 3</a></td></tr>
353<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
354 Item 4</a></td></tr>
355</table>
356</div>
357</td>
358<!-- MENU 3 END -->
359<!-- MENU 4 START -->
360<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
361<p>Menu 4</p>
362<div class="menuNormal" width="155">
363<table class="menu" width="155">
364<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
365 Item 1</a></td></tr>
366<tr>
367<!-- SUBMENU 4 START -->
368<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="154">Item 2 ...
369 <div class="menuNormal" width="150">
370<table class="menu" width="150">
371<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
372 Subitem 1</a></td></tr>
373<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
374 Subitem 2</a></td></tr>
375<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
376 Subitem 3</a></td></tr>
377<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
378 Subitem 4</a></td></tr>
379<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
380 Subitem 5</a></td></tr>
381</table>
382</div>
383</td>
384<!-- SUBMENU 4 END -->
385</tr>
386<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
387 Item 3</a></td></tr>
388<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
389 Item 4</a></td></tr>
390</table>
391</div>
392</td>
393<!-- MENU 4 END -->
394<!-- MENU 5 START -->
395<td class="menuNormal" onmouseout="collapse(this);" onmouseover="expand(this);" width="160">
396<p>Menu 5</p>
397<div class="menuNormal" width="155">
398<table class="menu" width="155">
399<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
400 Item 1</a></td></tr>
401<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
402 Item 2</a></td></tr>
403<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
404 Item 3</a></td></tr>
405<tr><td class="menuNormal"><a class="menuitem" href="page.asp">
406 Item 4</a></td></tr>
407</table>
408</div>
409</td>
410<!-- MENU 5 END -->
411</tr>
412</table>
413<!-- MAIN MENU END -->
414</body>
415</html>
416
417
418**图** **15.** **带有级联子菜单的下拉菜单**
419
420### 下拉菜单的完整 JavaScript
421
422本文中的所有菜单示例都使用相同的脚本文件。Menu.js 文件的代码如列表 16 所示。
423
424**注** 请确保将文件保存为“menu.js”。如果使用另外一个文件名，则必须在菜单示例的网页中更改对它的引用。如果不进行更改，您的菜单则无法按照本文所示的内容运行。
425
426
427 function expand(s)
428 {
429 var td = s;
430 var d = td.getElementsByTagName("div").item(0);
431 td.className = "menuHover";
432 d.className = "menuHover";
433 }
434 function collapse(s)
435 {
436 var td = s;
437 var d = td.getElementsByTagName("div").item(0);
438 td.className = "menuNormal";
439 d.className = "menuNormal";
440 }
441
442
443**列表** **16\. JavaScript** **文件**
444
445### 下拉菜单的完整外部级联样式表
446
447本文中所包括下拉菜单的每个 HTML 网页都引用一个名称为 menu.css 的外部级联样式表。为了使得网页和菜单显示正确，您需要包括此文件。Menu.css 文件的代码如列表 17 所示。
448
449**注** 请确保将文件保存为“menu.css”。如果使用另外一个文件名，则必须在菜单示例的网页中更改对它的引用。如果不进行更改，您的菜单则无法按照本文所示的内容显示。
450
451
452 BODY
453 {font-family: verdana, tahoma, arial, sans-serif;
454 font-size: 10pt;
455 margin: 0px;
456 margin-left: 3px;
457 margin-right: 3px;
458 padding: 0px;}
459 P
460 {padding-top: 10px;
461 margin: 0px;}
462 H1
463 {font-size: 12pt;
464 font-weight: bold;
465 padding-top: 15px;
466 margin: 0;}
467 table.navbar
468 {font-size: 8pt;
469 margin: 0px;
470 padding: 0px;
471 border: 0px;
472 font-weight: bold;}
473 table.menu
474 {font-size: 8pt;
475 margin: 0px;
476 padding: 0px;
477 font-weight: bold;}
478 td.menuNormal
479 {padding: 0px;
480 color: black;
481 font-weight: bold;
482 vertical-align: top;
483 background-color: white;}
484 td.menuHover
485 {padding: 0px;
486 color: black;
487 font-weight: bold;
488 vertical-align: top;
489 /*remove the following line for drop-down menu with images*/
490 background-color: lightblue;}
491 div.menuNormal
492 {display: none;
493 position: static;}
494 div.menuHover
495 {border: 1px solid lightblue;
496 background-color: white;
497 display: inline;
498 position: absolute;}
499 a.menuitem:link
500 {text-decoration: none;
501 color: black;
502 background-color: white;
503 display: block;}
504 a.menuitem:visited
505 {text-decoration: none;
506 color: black;
507 background-color: white;
508 display: block;}
509 a.menuitem:hover
510 {text-decoration: none;
511 color: black;
512 background-color: lightblue;
513 display: block;}
514 a.menuitem:active
515 {text-decoration: none;
516 color: black;
517 background-color: lightblue;
518 display: block;}
519
520
521**列表** **17.** **外部级联样式表**
522
523 返回页首
524
525## 小结
526
527您可以多种方式创建下拉菜单。本文讲述的是一个相对简单的下拉菜单，以及一些变化形式：级联菜单，使用图像的菜单。您可以使用本文中的代码和脚本在自己的网站中创建下拉菜单，也可以对这些代码和脚本进行修改，以创建其他下拉菜单效果，如竖直导航栏。无论您执行什么操作，都希望您在创建自己的下拉菜单界面外观时找到乐趣。
528
529 返回页首
530
531## 其他资源
532
533下面的一些其他 Internet 资源可以帮助您找到更多的方式来创建下拉菜单。另外，通过针对“drop-down menu”（下拉菜单）执行自己的 Internet 搜索，还可以找到更多的资源。
534
535• |
536
537_ Drop-Down Menus, Horizontal Style _
538
539---|---
540• |
541
542_ Pure CSS Menus _
543
544• |
545
546_ Dynamic Dropdown Menus _
547
548• |
549
550_ Creating Drop-Down Menus _
551
552转到原英文页面</p></p></p>