使用 JavaScript 创建 FrontPage 下拉菜单

作者：佚名来源：不详发布时间：2007-10-20 21:16:06

　该外部 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;}