使用 JavaScript 创建 FrontPage 下拉菜单.docx

使用 JavaScript 创建 FrontPage 下拉菜单.docx

《使用 JavaScript 创建 FrontPage 下拉菜单.docx》由会员分享，可在线阅读，更多相关《使用 JavaScript 创建 FrontPage 下拉菜单.docx（25页珍藏版）》请在冰豆网上搜索。

使用JavaScript创建FrontPage下拉菜单

使用JavaScript创建FrontPage下拉菜单

2（共3）对本文的评价是有帮助 - 评价此主题

发布日期:

1/28/2005 | 更新日期:

1/28/2005

LisaWollin

MicrosoftCorporation

适用于：

MicrosoftOfficeFrontPage2003

MicrosoftFrontPage2002

MicrosoftFrontPage2000

摘要：

 当您在Internet上进行浏览时，到处都在使用各种类型的下拉菜单，但如果您曾经尝试创建过一种类型的下拉菜单的话，就会了解此过程可能并非总是非常简单。

本文解释了创建您自己的下拉菜单所需的脚本和样式。

本页内容

 下拉菜单简介 

 创建简单下拉菜单 

 简单下拉菜单的变化形式 

 下拉菜单的代码列表 

 小结 

 其他资源 

下拉菜单简介

Internet上几乎每个站点都存在某种种类的下拉菜单。

您可能会发现，简单的下拉菜单会在网页的上部水平排列，复杂些的会级联子菜单，有些使用带有鼠标停留效果的图形，还有一些在网页的左侧或右侧竖直排列。

如果您想过在自己的网站使用下拉菜单的话，本文则会在您开始行动时有所帮助，并且会解释清楚一些看起来比较神秘的功能。

大多数下拉菜单都使用动态HTML（DHTML）来创建特殊的显示/隐藏行为。

所有DHTML都从客户端脚本和CSS样式的组合中获取其特殊功能。

通常，这就意味着当用户执行某个操作时，就会触发浏览器中的事件，从而导致浏览器运行一个脚本来更改一个或多个元素的显示属性。

本文讲述了下拉菜单的三种不同变化形式。

您可以使用本文中的示例创建自己的下拉菜单。

第一个示例是一个简单的下拉菜单。

其他两个下拉菜单示例是第一个示例的变化形式：

一个具有级联菜单，另一个使用图像。

注 “代码列表”部分中两个示例的代码位于本文结尾。

对于第三个示例，则解释了如何修改其他两个示例中的一个。

本文中所有的下拉菜单示例都能在MicrosoftInternetExplorer5.0或更高版本中正常运行。

简单下拉菜单的示例和带有图像的下拉菜单示例还能在Opera、Mozilla和Netscape浏览器中按预期运行。

级联下拉菜单示例能在InternetExplorer和Opera中按预期运行，但是在Mozilla或Netscape浏览器中却不行。

另外，本文中的HTML示例使用下列DOCTYPE。

如果您指定不同的DOCTYPE，该代码则可能无法按照预期或希望来运行。

这种情况下，您可能需要对代码进行更改，以使其能够与不同的DOCTYPE一起正常运行。

（有关详细信息，请参阅WorkingwithHTMLDOCTYPEDeclarationsinFrontPage。

）

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/loose.dtd">

 返回页首 

创建简单下拉菜单

这个简单下拉菜单示例会在网页的上部产生一个水平菜单。

当用户将鼠标指针指向每个菜单项时，浏览器都会显示一个下拉项列表项。

图1显示了菜单在InternetExplorer中显示的方式。

图 1. 简单下拉菜单

下面的几节内容讲述了创建此下拉菜单所需的HTML、JavaScript和CSS代码。

您在本文结尾处会发现该代码列表部分列出的完整代码。

注 用于创建本文中菜单的HTML、脚本对象、属性、方法、事件和CSS属性的完整讨论不在本文范围之内。

有关这些主题的详细信息，请参阅MSDNLibrary中WebDevelopment部分的 HTMLandDynamicHTML 参考。

简单下拉菜单的 HTML 代码

该下拉菜单是使用表创建的。

这个菜单表比较简单，如列表1中所示。

...[missingTDelements]

列表 1. 主菜单栏表

该菜单表具有一个值为“navbar”的 class 属性，该属性与一个命名的样式类相关，width 属性设置为一个固定的像素度量：

800。

（如果您指定一个不同的度量或百分比，则可能需要更改表中各列的度量，这样可能会更改菜单在浏览器中显示时的行为方式。

有关详细信息，请参阅 CLASSAttribute|classNameProperty 和WIDTHAttribute|widthProperty。

）

该表由一行组成（TRElement|trObject），该行包含了多个列（TDElement|tdObject）。

本文中的示例提供了五列，每列带有一个下拉菜单。

每个下拉菜单都位于该菜单表中的一个TD元素内。

TD元素中的代码使用 onmouseover 和 onmouseout 事件提供下拉菜单的正确显示和隐藏功能。

（有关详细信息，请参阅 onmouseoverEvent 和 onmouseoutEvent。

）列表2显示了该下拉菜单TD元素的代码。

为了确保菜单使用简便，每个下拉菜单的代码都是完全相同的。

onmouseover="expand（this）;"

onmouseout="collapse（this）;">

Menu1

...[missingDIVelement]

列表 2. 下拉菜单 TD 元素

每个TD元素的 width 属性都设置为160像素，从而使得每个菜单都占表总宽度的20%。

如果您要添加或删除菜单或者更改表的宽度，则必须调整表中每个菜单的宽度。

例如，如果您要删除该示例中的其中一列，以便拥有4列，则对于一个800像素宽的菜单来说，每个菜单的宽度必须为200像素。

如果您要添加一个菜单，以便拥有6列，则这个宽度必须大约为133像素，依此类推。

每个下拉菜单都包含在一个DIV元素中，而该DIV元素又嵌套于每个顶级TD元素中。

在该DIV元素中，每个下拉菜单的代码都包含于一个嵌套的TABLE元素中。

列表3显示了嵌套的DIV和下拉菜单表。

...[missingTRelements]