flyinweb's blog

使用 JavaScript 构建下拉菜单

摘要：学习如何使用 FrontPage、JavaScript 和层叠样式表为 Web 页构建下拉菜单。


简介
很多 Web 站点都采用某种形式的下拉菜单。下拉菜单可以设计用于访问子菜单，而这些子菜单进而可以访问其他子菜单。通过使用下拉菜单，可以为最深层次的站点提供具有针对性的导航结构。尽管在大多数 JavaScript 站点上都有用于这种菜单类型的免费脚本，但完成的菜单通常并不是非常吸引人，并且不能在所有的浏览器中运行。在本文中，我将讨论如何使用短短的几行 JavaScript 和一个层叠样式表来构建吸引人且符合下列所有条件的下拉菜单： 

• 跨浏览器兼容。该脚本会在所有的版本 4 和更高版本的浏览器中运行。  
• 可自定义的内容。该脚本允许在下拉菜单中放入链接、文本和图像的任意组合。  
• 高效率脚本编写。构成这个菜单的脚本的大小小于 2 KB。 

可以下载名为 FrontPage 2002 Sample Dropdown menu.zip 的压缩文件，以便您可以在遵循本文所述并构建自己的菜单时使用。FrontPage 2002 Sample Dropdown menu.zip 包含图像、脚本、doctype 声明（这样，我们可以根据 WWW 联合会阐明的 HTML 4.01 规范来正确地验证该文档）、两个层叠样式表以及一个 Default.htm 页面。要开始构建自己的下拉菜单，请将该压缩文件的内容进行解压缩，并将该文件导入 Microsoft FrontPage Web 站点，然后将图像（.gif 文件）移动到名为 images 的子文件夹中。

添加菜单按钮
在 images 文件夹中，您将找到用于创建四个菜单按钮的图像。每个按钮都具有三种状态：默认状态、当指针移动到按钮上时出现的悬停状态以及指示当前页面的按下状态。还有一个徽标 (Logo.gif) 和一个背景图像 (Bg.gif)；这两个都是我在自己的站点上用于设计页面的图像。我们将插入 Logo.gif，而使用附加的层叠样式表来应用 Bg.gif。随着对该过程的逐步熟悉，您会希望创建并插入自己的图像。为了帮助我们正确地定位一切内容，我还将名为 Shim.gif 的透明 GIF 包括在其中。

由于要将徽标和菜单按钮定位在表格中，因此让我们从将表格添加到页面来开始。

要将表格添加到页面：

1. 打开 Default.htm。光标的放置位置无关紧要，因为我们稍后将会定位该表格。  
2. 在 Table 菜单上，指向 Insert，然后单击 Table。  
3. 选择下列设置：带有设置的 Insert Table 对话框
 
要将图像添加到表格：

1. 将光标放在第一个单元格中。 
2. 在 Insert 菜单上，指向 Picture，然后单击 From File。 
3. 浏览到 images 文件夹，然后选择 Shim.gif。 
4. 单击 Insert。 
 
要设置图片属性：

1. 右键单击该图像，然后单击 Picture Properties。 
2. 选择 Specify size，然后清除 Keep aspect ratio。 
3. 将宽度设置为 40 像素、高度设置为 49 像素。 
 
要设置单元格属性：

1. 右键单击该单元格，然后单击 Cell Properties。 
2. 选择 Specify width。  
3. 将宽度设置为 40 像素。 

我们希望徽标出现在下一个单元格中，但需要徽标跨越四列。

要使一个单元格跨越多列：

1. 单击第一行的第二个单元格。  
2. 在 Table 菜单上，指向 Select，然后单击 Cell。  
3. 按住 CTRL 按钮，然后单击该行中接下来的三个单元格。  
4. 右键单击任意突出显示的单元格，然后单击 Merge Cells。 
 
现在，将徽标插入到刚创建的跨列单元格中。然后，将 Shim.gif 插入到最后一个单元格中，将其宽度设置为 24 像素、高度设置为 49 像素。

将上述步骤作为指导，移动到第二行，将 Shim.gif 插入到第一个单元格中，并将其宽度设置为 40 像素、高度设置为 26 像素。现在，将这些按钮本身添加到第二行。将 Oneout.gif 插入到第二个单元格，将 Twoout.gif 插入到第三个单元格，将 Threeout.gif 插入到第四个单元格，将 Fourout.gif 插入到第五个单元格。要完成该表格，请将 Shim.gif 插入到最后一个单元格，并将其宽度设置为 24 像素、高度设置为 26 像素。

添加链接
现在，我们可以将链接添加到菜单。并不是所有链接都将处于活动状态。我们将为 Logo.gif 和 Shim.gif 使用静态超级链接以触发菜单功能所必需的脚本。

要添加链接：

1. 在第一行的第二个单元格中，右键单击 Logo.gif，然后单击 Hyperlink。  
2. 在 Address 文本框中，键入 javascript:;，然后单击 OK。  
3. 在第二行的第一个单元格中，右键单击 Shim.gif，然后单击 Hyperlink。  
4. 在 Address 文本框中，键入 javascript:;，然后单击 OK。 
5. 对于四个菜单按钮（Oneout.gif、Twoout.gif、Threeout.gif 和 Fourout.gif）中的每一个，右键单击该图像，然后单击 Hyperlink。  
6. 在 Address 文本框中，键入您要链接的页面的 URL，然后单击 OK。 
7. 在最后一行的最后一个单元格中，右键单击 Shim.gif，然后单击 Hyperlink。  
8. 在 Address 框中，键入 javascript:;，然后单击 OK。 
 
定位表格
表格虽然已经完成，但我们仍需要将其定位到页面的左上角。过去，通过使用正文标记中的边距属性将页面边距设置为零，我们可以实现这一操作。但是，在 HTML 4.01 规范中边距属性被否决，因此我们将使用绝对位置将菜单定位到页面的左上角。

要定位表格：

1. 右键单击工具栏上的任意位置，然后单击 Positioning 显示“Positioning”工具栏。  
2. 单击表格内部。 
3. 在 Table 菜单上，指向 Select，然后单击 Table。  
4. 在“Positioning”工具栏上，单击最左端的 Position Absolutely 图标，然后输入以下设置：图 2. 带有设置的 Positioning 工具栏

注 我已经删除了默认高度设置；它是不必要的，而且可能会在一些浏览器中引起问题。
 
5. 保存页面。  
6. 要在浏览器中预览该页面，请在 File 菜单上，单击 Preview in Browser。注意菜单表格位于页面的左上角。 
 
添加下拉菜单
现在，让我们从第一个菜单按钮开始来构建菜单的下拉部分 － 子菜单。使用以下设置将表格添加到页面：带有设置的 Insert Table 对话框

表格的放置位置无关紧要，因为我们会稍后对其进行定位。我们需要将某些链接添加到菜单中以便正确地对其进行测试。在第一个表格行中键入 Link One，在第二个表格行中键入 Link Two，依次类推，直到键入 Link Four。在最后一行中，键入几行文本。要使我们能够使用层叠样式表设置最后一个单元格中的文本的样式，该文本需要位于<P>标记中。

Some interesting text or an image, or both, might go here. 

现在，我们已经创建了子菜单表格，需要将其直接定位在第一个菜单按钮下。

要定位子菜单表格：
1. 单击表格内部。  
2. 在 Table 菜单上，指向 Select，然后单击 Table。  
3. 在“Positioning”工具栏上，单击 Position Absolutely，然后输入以下设置： 带有设置的 Positioning 工具栏
 
这会直接将子菜单定位在第一个按钮正下方。FrontPage 会自动将 DIV 元素添加到表格中以便正确对其进行定位。使用层叠样式表，我们将类属性应用到该 DIV 元素。切换到 HTML 视图并找到刚添加的 DIV 元素的代码。我为子菜单创建的类属性称为 drop，因此，让我们添加 class="drop" 以将 drop 类属性分配给 DIV 元素：

<div style="position: absolute; top: 75px; left: 44px; width: 175px; z-index: 10" class="drop"> 

显示和隐藏菜单
现在，该到智能部分了。当我们将指针移动到第一个按钮的上方时，我们需要使该菜单可见，而当我们移开指针时，需要它再次隐藏。同时，当指针悬停在菜单上时，菜单按钮图像应该更改为悬停状态 (Oneover.gif)，当指针离开菜单时返回默认状态。要确保当指针移开菜单时，该菜单处于隐藏状态，我们将在该菜单后添加一个稍微大一些的透明 GIF。当用户将指针移开菜单时，透明 GIF 将触发脚本并隐藏菜单。

在页面上的任意位置插入 Shim.gif（我们将在稍后对其进行定位）。该 Shim.gif 需要比菜单大，因此将宽度设置为 224 像素、高度设置为 250 像素。

要将 Shim.gif 定位在第一个菜单下：

• 单击该图像。  
• 在“Positioning”工具栏上，单击 Position Absolutely，然后输入以下设置： 带有设置的 Positioning 工具栏 
• 因为我们需要在用户将指针移动到该图像上时运行某个脚本，所以右键单击该图像，单击 Hyperlink，然后在 Address 框中键入 javascript:;。
 
现在，切换到 HTML 视图并找到该图像的 HTML。FrontPage 已经应用了 SPAN 标记，但我们希望使用 DIV 元素。DIV 元素是块级元素，它可以包含其他块级元素，例如，P、H1 和 TABLE 元素。SPAN 元素是一个内联元素，不能包含块级元素。我们要使用块级元素，因此将 SPAN 元素更改为 DIV 元素以便以下列代码结束：

添加事件处理程序
在构建菜单后，我们需要将事件处理程序添加到已经创建的链接上。我们可以编写两个函数，一个用于显示子菜单，一个用于隐藏它，但是这样做会浪费时间。如果一个函数可以完成这两项工作，效率会更高。我们称这个函数为 showHide。这样，如果我们要显示某个特定子菜单，我们就传入想要显示的子菜单的编号。例如，showHide('1') 将显示第一个子菜单。如果要隐藏当前打开的子菜单，不管它是哪个子菜单，那么我们在不使用参数的情况下调用该函数，例如 showHide()。

让我们将事件处理程序添加到第一个菜单按钮。触发时，它将会显示按钮的子菜单。在 FrontPage 中，单击第一个菜单按钮，然后切换到 HTML 视图。该图像需要一个名称，以便我们可以使用脚本引用它。

在 image 标记中，添加一个 name 属性（这个图像的名称为“trig1”）。我们还需要将 onmouseover 事件处理程序添加到该按钮。完成后的代码将类似于如下所示：

<a HREF="default1.asp" onmouseover="showHide('1')">   
<img alt="" src="images/oneout.gif" name="trig1" border="0" width="124" height="26">   
</a> 

注 这就是我们的第一个子菜单，或者子菜单 1。showHide 参数为 1，图像名为 trig1，我们正在查看图像 Oneout.gif。

<a href="javascript:;" onmouseover="showHide()">   
<img src="images/Shim.gif" width="220px" height="300px" border=0>   
</a> 

在浏览器中预览页面。当指针移动到按钮上时，子菜单将会显示。

要添加事件处理程序以隐藏子菜单，请在 HTML 中找到透明 GIF 的 HTML。添加 onmouseover 事件处理程序以调用不带参数的 showHide：

 HYPERLINK "javascript:;" for(i=0;i<aLayers.length;i++){   
if(document.layers)document.layers[aLayers[i]].visibility='hide';   
else if(document.getElementById)   
  document.getElementById(aLayers[i]).style.visibility='hidden';   
else if(document.all)document.all(aLayers[i]).style.visibility='hidden';   
} 

向上移动两行，我们将看到 Logo.gif 的 HTML。我们需要当用户将指针移动到 Logo.gif 上时隐藏该菜单，因此将 onmouseover 事件处理程序添加到链接：

<a href="javascript:;" onmouseover="showHide()"><img border="0"   
  src="images/logo.gif" width="516" height="49"></a> 

现在，向上移动四行，我们将会发现处理菜单表格的 DIV 元素的 HTML。该 DIV 元素应该为 id 属性指定 "top"：

<div style="position: absolute; top: 0px; left: 0px; width: 580px;" id="top"> 

现在，找到刚创建的下拉菜单的 HTML。我们需要将该 DIV 元素的 z 索引设置为 hidden，并为其指定一个 id 属性值 "sub1"，这样代码会类似于如下所示：

<div style="position: absolute; top: 75px; left: 44px; width: 175px; z-index: 10; visibility: hidden" id="sub1" class="drop">  

最后，向下滚动到我们刚才添加的 Shim.gif 的 HTML。该 DIV 元素也需要隐藏，并且应该将 id 属性值设置为 "close1"。该元素也需要一个 onmouseover 事件处理程序，用来通知脚本在用户将指针移动到其上时隐藏菜单。

要在浏览器中预览页面，在“文件”菜单上，单击“在浏览器中预览”。将指针移动到菜单按钮上，然后将其移开菜单按钮。正如您所见，现在已具备了一个正常工作的下拉菜单。

添加更多菜单
正如前面所见，每个菜单都包括三个部分：触发子菜单的按钮图像、包含子菜单的 DIV 元素和隐藏子菜单的关闭 DIV 元素。

您可以在一个页面上按喜好创建多个子菜单。但是，要使用本文中包括的脚本，遵循我所使用的菜单部分的命名顺序非常最重要。菜单按钮必须按顺序进行命名：trig1、trig2、trig3 等等。子菜单必须包含 id sub1、sub2、sub3 等等。并且关闭 DIV 元素必须将 id 属性值设置为 close1、close2、close3 等等。

记住这个命名顺序，遵循上述步骤创建第二、第三和第四个按钮的菜单。下面是您应该使用的设置的总结。每个子菜单和关闭 DIV 元素都需要准确地出现在相关联的菜单按钮下面。所有 DIV 元素的顶端位置都是 75px。对于左侧位置，我已经在页面上移动每个子菜单，直到它准确位于菜单按钮下。注意子菜单需要定位到准确的像素十分重要。关闭 DIV 元素的左侧位置无需准确到像素，因为每个关闭 DIV 元素都比相关联的菜单大。

                               菜单 1    菜单 2   菜单 3   菜单 4 
图像名                      trig1      trig2      trig3      trig4
菜单 Div ID                sub1      sub2      sub3     sub4
菜单 Div 顶端位置       75px      75px     75px     75px
菜单 Div 左侧位置       44px      174px   305px    436px
关闭 Div ID                close1     close2   close3    close4
关闭 Div 顶端位置       75px       75px     75px     75px
关闭 Div 左侧位置       10px       154px   258px    378px

将事件处理程序添加到第二、第三和第四个子菜单中。为了多样化，您可以尝试添加不同长度的子菜单。还可以将图像或任意多的文本添加到子菜单中。只需要记住每个菜单的命名规则即可：trig1 用于图像、sub1 用于菜单 DIV 元素以及 close1 用于包含透明 GIF 的 DIV 元素。还要记住透明 GIF 必须比该菜单大。

有了能正常工作的菜单后，让我们来看一下代码。

脚本
该脚本的功能存在于函数 showHide()。让我们看一下 showHide() 函数的代码：

function showHide(){   
var a = showHide.arguments;   
if(a.length>0) a = new Array('sub'+a[0], 'close'+a[0],a[0]);   
if(!document.layerSet){   
if(a.length > 0){aLayers = new Array();for(i=0; i 0){for(i=0; i< +?.src?);> a[2] else{document.images[?trig?+a[2]].src="eval('over'" +?.src?);} c="eval('over'" if(document.layers){document.layers[?top?].document.images[?trig?+a[2]].sr ;} if(document.layers)document.layers[aLayers[i]].visibility="show"> 

我们需要做的首要事情就是指派传递到变量（在此例中为 a）的参数（如果有）。我们可以使用一行代码来完成：

var a = showHide.arguments;  

我们的变量“a”将根据数组为空（如果没有任何参数传递到函数）或为零。第一个元素“a[0]”将包含传入的参数（基于子菜单最终数量，为 1、2、3 等等）。因此，我们将需要测试“a”变量的长度。如果它大于 0，我们需要构建一个稍后会在脚本中使用的数组。以下代码测试我们的“a”变量的长度并构建包含两个 DIV 元素以及传递到函数的参数的数组。

if(a.length>0) a = new Array('sub'+a[0], 'close'+a[0],a[0]); 

因此，如果将参数“1”传递到函数，“a”将是包含元素 sub1、close1 和 1 的新数组。

我们需要一种方法来确定这是否是第一次在页面上调用该函数，以便确定是否存在需要关闭的任何打开的 DIV 元素。

如果确实是第一次调用该脚本，则脚本将构建包含两个 DIV 元素（只要这两个元素已经打开，我们就要关闭它们）的数组。我会使用变量“document.layerSet”来确定该函数是否是第一次进行调用。如果我们只使用一个简单的设置为 true 或 flase 的变量（例如，“layerSet=true”），则它不会在两次调用该函数之间保留其值。通过以格式“document.variableName”使用变量，该变量将在两次调用函数之间保留它的值。

您可能会认为“document.layerSet”是指文档对象的 layerSet 属性，同样，“document.bgColor”是指文档对象的 bgColor 属性。在此例中，情况并非如此。不存在文档对象的 layerSet 属性。它只是我为变量选择的名称。我也可以简单地选择“document.jonsVariable”。当我们以这种方式使用变量时，必须选择不是文档对象属性的变量名称。您可能会发现这种技术在很多脚本中都非常有用。

第一次调用该脚本时，“document.layerSet”将设置为 false，因为我们尚未为它设置值，并且它并不是文档对象的有效属性。确定“document.layerSet”是否为 false 的快速方法就是编写 if(!document.layerSet)。如果它为 false，我们需要构建一个数组（我称其为“aLayers”）以保存我们要打开菜单的 ID：

if(!document.layerSet){   
   if(a.length > 0){   
     aLayers = new Array();   
      for(i=0; i< } document.layerSet="true;"> 

在调用脚本后，“document.layerSet”将设置为真，这样该代码将只运行一次。

如果不是第一次调用该函数，将会打开当前在页面上可见的包含两个 DIV 元素 — 子菜单 (subx) 和关闭 DIV (closex)— 的数组 (aLayers)。

要隐藏这些 DIV 元素并将菜单按钮图像切换回到其默认状态，我们需要找到当前打开菜单的索引 (x)。索引是 aLayers 的第一个元素的第四个字符，因此我们可以使用以下代码找到它：

theIndex = aLayers[0].charAt(3); 

变量 theIndex 将存储我们要查找的编号，而 aLayers 将在其数组中保存当前打开的 DIV 元素的编号。方法 charAt(3) 将跳过前三个字符并将第四个字符的值分配给 theIndex。

您将会想起我们的图像遵循命名顺序 trig1、trig2、trig3 等等。运行上述代码段后，我们可以通过利用 'trig'+theIndex 引用当前打开的图像来查找其名称。通常情况下，我们可以使用“document.images['ImageName']”来处理页面上的图像。

在除 Netscape 4.0 的任意浏览器中，都可以使用“document.images['trig'+theIndex]”来调用该图像。但 Netscape 4.0 使用非 DIV 元素的层，因此我们需要添加该调用的“document.layers['top']”以便使其对 Netscape 4.0 有意义。结果是：

document.layers['top'].document.images['trig'theIndex]  

我们可以编写特定代码以适应 Netscape 4.0，并确保对跨浏览器兼容的菜单图像的引用。因为 Netscape 4.0 是唯一包含 document.layers 集合的浏览器，所以 if(document.layers) 是测试浏览器是否为 Netscape 4.0 的快速简单的方法。在建立对图像的引用后，我们可以使用 'out' + theIndex + '.src' 将图像源 (src) 转换回其默认状态：

if(document.layers){hideImage   
  =document.layers['top'].document.images['trig'+theIndex];}   
else{hideImage = document.images['trig'+theIndex];}   
hideImage.src = eval('out' + theIndex + '.src');  

在转换菜单图像后，我们需要隐藏当前打开的子菜单。打开的菜单存储在“aLayers”中，因此我们将循环“aLayers”并隐藏 DIV 元素。利用脚本处理已定位的 DIV 元素有三种不同的方法。对于 Netscape 4.0，方法是 document.layers['NameOfDiv']。对于 Microsoft Internet Explorer 4.x，方法是 document.all('NameOfDiv')。对于浏览器版本 5 和更高版本，方法是 document.getElementById('NameOfDiv')。因此我们可以依次通过“aLayers”以确定所有三种可能性，并且对于 Netscape 4.0 将两层的可见性设置为“hide”，对于所有其他浏览器设置为“hidden”。

for(i=0;i< if(document.layers)document.layers[aLayers[i]].visibility="hide" }> 

此时，所有菜单图像都处于其默认状态，并且所有子菜单都处于隐藏状态。如果我们调用不带参数的函数，换言之，如果我们将指针从一个子菜单上移开，同时又不移动到另一个子菜单上，那么就不会有任何其他操作。

但是，如果我们调用带参数的函数（即，如果我们将指针移动到另一个子菜单上），那么我们需要显示选定的子菜单并将菜单按钮转换到其悬停状态。当然，我们还需要使用 aLayers 在显示上添加两个 DIV 元素 — subx 和 closex—，这样我们可以在下一次调用该函数时隐藏它们。脚本的其余部分是使用与前面相同的方法来确定 theIndex 并对 Netscape 4.0 进行测试，它将如下所示：

if(a.length > 0){   
for(i=0; i< a[2] else{document.images[?trig?+a[2]].src="eval('over'" +?.src?);} c="eval('over'" if(document.layers){document.layers[?top?].document.images[?trig?+a[2]].sr ;} if(document.layers)document.layers[aLayers[i]].visibility="show" }} +?.src?); aLayers[i]="a[i];"> 

脚本将继续以这种方式运行，直到用户关闭浏览器窗口。

两个样式表
让我们查看一下样式表如何工作以及它们实现的内容。我们需要确保页面可以显示在所有浏览器中，包括 Netscape 4.0。我们使用两个样式表来实现这一目的：一个用于 Netscape 4.0 的基本样式表和一个用于最新浏览器版本的样式表。将样式表链接到页面的通常的语法是：

<link rel="stylesheet" type="text/css" href="stylesheet.css"> 

所有版本 4.0 和更高版本的浏览器都支持该语法。将样式表链接到页面的另一个方法是 @import 命令：

<style type="text/css">   
@import url(stylesheet.css);   
</style>  

Netscape 4.0 不支持 @import 命令并将其完全完全忽略。因此，如果我具有一个用于 Netscape 4.0 浏览器的样式表和另一个用于版本 5.0 和更高版本浏览器的样式表，我可以对两个样式表使用以下代码：

<link rel="stylesheet" type="text/css" href="old.css">   
<style type="text/css">@import url('v5.css');</style> 

使用这种格式，就不再需要浏览器检测。

现在，让我们看一下样式表本身。我们从设置 标记的样式开始。我想要背景图像 (Bg.gif) 在 x 方向中重复（即在 x-y 轴上交叉，但不在同一平面上）。我们还需要定位菜单的左上角，这样我们添加到页面的任何内容会正确地定位于该菜单下面。因此，我们设置顶端边距为 100 像素。所有其他边距设置为 0 像素。

body {   
   background-image: url('/images/bg.gif');   
   background-repeat: repeat-x;   
   margin-top:100px;   
   margin-right: 0px;   
   margin-bottom: 0px;   
   margin-left: 0px;   
} 

现在，我们为下拉菜单本身定义一个类属性 (drop)。drop 类属性定义在以下几个代码段中：“.drop”用于常规属性；“.drop td”用于处理表格单元格的表现形式；“.drop a”和“.drop a:hover”用于处理链接的表现形式。

.drop {   
   border: 1px none #666666;   
   padding-top: 10px;   
   background-color: #FFFFFF;   
   layer-background-color: #ffffff;   
}   
.drop td {   
   font-family: Verdana, Arial, Helvetica, sans-serif;   
   font-size: 12px;   
}   
.drop a {   
   color: #99CCCC;   
   text-decoration: none;   
   font-size: 14px;   
   padding-left: 11px;   
   padding-top: 2px;   
   padding-bottom: 2px;   
}   
.drop a:hover {   
   color: #FFFFFF;   
   background-color: #99CCCC;   
} 

当然，设置页面样式的方式并没有对错之分，因此尝试自己的颜色和字体以得到想要的外观。有关层叠样式表的详细信息（包括类、特性、属性和值），请参阅 Using Cascading Style Sheets on Your Web Site。

灵活性的优势
我所介绍的技术的优势在于我们将具有一个可以运行在所有当前浏览器中的精简脚本。更重要的是，该技术非常灵活。在掌握该技术后，您将能够设计和构建自己的下拉菜单。还可以使用该技术来构建垂直的弹出菜单。您无需接触构建该菜单的 JavaScript，但确实需要学习层叠样式表。我已经为该演示使用了一些非常简单的样式。通过修改层叠样式表，您可以使自己的菜单更有趣、更吸引人。