当前页面: 开发资料首页 → Javascript 专题 → 使用 JavaScript 创建 FrontPage 下拉菜单

使用 JavaScript 创建 FrontPage 下拉菜单

摘要: 使用 JavaScript 创建 FrontPage 下拉菜单

使用 JavaScript 创建 FrontPage 下拉菜单

发布日期： 1/28/2005 | 更新日期： 1/28/2005

Lisa Wollin
Microsoft Corporation

适用于：
Microsoft Office FrontPage 2003
Microsoft FrontPage 2002
Microsoft FrontPage 2000

摘要： 当您在 Internet 上进行浏览时，到处都在使用各种类型的下拉菜单，但如果您曾经尝试创建过一种类型的下拉菜单的话，就会了解此过程可能并非总是非常简单。本文解释了创建您自己的下拉菜单所需的脚本和样式。

本页内容

<table style="MARGIN-TOP: 7px; MARGIN-BOTTOM: 12px" cellSpacing=0 cellPadding=0 border=0> <tr vAlign=top> <td></td> <td class=onThisPage>下拉菜单简介</td></tr> <tr vAlign=top> <td></td> <td class=onThisPage>创建简单下拉菜单</td></tr> <tr vAlign=top> <td></td> <td class=onThisPage>简单下拉菜单的变化形式</td></tr> <tr vAlign=top> <td></td> <td class=onThisPage>下拉菜单的代码列表</td></tr> <tr vAlign=top> <td></td> <td class=onThisPage>小结</td></tr> <tr vAlign=top> <td></td> <td class=onThisPage>其他资源</td></tr></table>

下拉菜单简介

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。）

 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"

   onmouseover="expand(this);"

   onmouseout="collapse(this);">

   Menu 1

   ...[missing DIV element]

</td>

列表 2. 下拉菜单 TD 元素

每个 TD 元素的 width 属性都设置为 160 像素，从而使得每个菜单都占表总宽度的 20%。如果您要添加或删除菜单或者更改表的宽度，则必须调整表中每个菜单的宽度。例如，如果您要删除该示例中的其中一列，以便拥有 4 列，则对于一个 800 像素宽的菜单来说，每个菜单的宽度必须为 200 像素。如果您要添加一个菜单，以便拥有 6 列，则这个宽度必须大约为 133 像素，依此类推。

每个下拉菜单都包含在一个 DIV 元素中，而该 DIV 元素又嵌套于每个顶级 TD 元素中。在该 DIV 元素中，每个下拉菜单的代码都包含于一个嵌套的 TABLE 元素中。列表 3 显示了嵌套的 DIV 和下拉菜单表。



  <table class="menu" width="155">

    ...[missing TR elements]

  </table>

列表 3. 嵌入 DIV 和 TABLE 元素的下拉菜单

该下拉菜单的嵌套 DIV 元素有一个值为“menuNormal”的 class 属性，和一个值为“155”的 width 属性。嵌套的 TABLE 元素有一个值为“menu”的 class 属性，和一个值为“155”的 width 属性。

下拉菜单中的每一项组成了包含了一个 TD 元素的 TR 元素。列表 4 显示了下拉菜单行项的 TR 和 TD 元素。

<tr>

  <td class="menuNormal">Item 1</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 文件引用

该外部 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 中显示的是一个菜单项的代码，我们来回顾一下。

<tr>

  <td class="menuNormal">Item 1</td>

</tr>

列表 12. 行项 TD 元素

级联菜单与该简单下拉菜单使用同样的脚本和样式，因此您要创建级联子菜单，所需的操作只是使用一个包含了与顶级 TD 元素相同的 HTML 的 TD 元素来替换单个的菜单项 TD 元素。基本来讲，就是使用列表 13 中显示的 TD 元素替换列表 12 中的 TD 元素。

<td class="menuNormal" width="160"

  onmouseover="expand(this);"

  onmouseout="collapse(this);">

  Menu ...

  

  <table class="menu" width="155">

    <tr>

      <td class="menuNormal">Item 1</td>

      </tr>

      ...[missing TR elements]

  </table>

    ...[missing code]

  

</td>

列表 13. 级联菜单 TD 元素

您可能已经注意到，此代码与前面部分显示的，用于简单下拉菜单的代码完全相同，但是有一个差别。要将级联菜单放置在菜单项文本的旁边（而不是像顶级下拉菜单那样放在下面），您需要从菜单项文本两边删除开始和结束

标记，然后在最后添加一个省略号。

注省略号只是表示该菜单项会引出一个子菜单。您可以将省略号替换为图形或另外一个符号。

创建级联子菜单

使用同样的简单 HTML，您可以通过将各个行项的 TD 元素替换为级联菜单的 TD 元素（如前面的列表 13 所示），添加所需的任意多级的级联子菜单。这就表示您可以创建包含级联子菜单的下拉菜单，而级联子菜单又可以包含另一个级联子菜单（如图 3 所示），无所穷尽。

图 3. 带有多个级联子菜单的下拉菜单

创建带有图像的下拉菜单

要向本文中的简单下拉菜单添加图像，使用 FrontPage 中的交互式按钮功能会相对简单一些。图 4 显示了添加交互式按钮之后，本文前面部分讲述的简单下拉菜单在 Internet Explorer 中的显示方式。

图 4. 带有图像的下拉菜单

添加了按钮之后，您需要对一个 CSS 类进行一些更改才能删除背景色。下面的步骤解释了如何使用 FrontPage 中的交互式按钮功对前面讲述的简单下拉菜单进行修改，使其使用图像。

注您可以使用自己的图像来代替交互式按钮功能中的按钮图像。但是，交互式按钮功能提供了可为图像创建鼠标停留效果的 onmouseover 和 onmouseout 事件脚本。本文没有包括这个图像鼠标停留脚本。

</td> <td>

在 FrontPage 中创建一个网页，然后切换到“代码”视图。