Spry DW JavaScript 菜单栏构件（目标属性）

关于菜单栏构件

菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。

Dreamweaver 允许您插入两种菜单栏构件：垂直构件和水平构件。下例显示一个水平菜单栏构件，其中的第三个菜单项处于展开状态：

查看完全大小图形
菜单栏构件（由 <ul>、<li> 和 <a> 标签组成）

A.

菜单项具有子菜单

B.

子菜单项具有子菜单

 

菜单栏构件的 HTML 中包含一个外部 ul 标签，该标签中对于每个顶级菜单项都包含一个 li 标签， 而顶级菜单项（li 标签）又包含用来为每个菜单项定义子菜单的 ul 和 li 标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。

有关菜单栏构件工作方式的更全面的说明（包括菜单栏构件代码的全面分析），请访问 www.adobe.com/go/learn_dw_sprymenubar_cn。

有关创建 Spry 菜单栏的教程，请访问 www.adobe.com/go/vid0168_cn。

插入菜单栏构件
选择“插入”>“Spry”>“Spry 菜单栏”。
选择“水平”或“垂直”并单击“确定”。
注： 还可以使用“插入”栏中的“Spry”类别插入菜单栏构件。

注： Spry 菜单栏构件使用 DHTML 层来将 HTML 部分显示在其它部分的上方。如果页面中包含 Flash 内容，可能出现问题，因为 Flash 影片总是显示在所有其它 DHTML 层的上方，因此，Flash 内容可能会显示在子菜单的上方。此问题的解决方法是，更改 Flash 影片的参数，让其使用 wmode="transparent"。有关详细信息，请访问 www.adobe.com/go/15523_cn。

添加或删除菜单和子菜单

使用属性检查器（“窗口”>“属性”），向菜单栏构件中添加菜单项或从中删除菜单项。

添加主菜单项

在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，单击第一列上方的加号按钮。
（可选）重命名新菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。
添加子菜单项

在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，选择要向其中添加子菜单的主菜单项的名称。
单击第二列上方的加号按钮。
（可选）重命名新的子菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。

要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。

注： Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。
删除主菜单项或子菜单项

在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。
更改菜单项的顺序
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要对其重新排序的菜单项的名称。
单击向上箭头或向下箭头可以向上或向下移动该菜单项。
更改菜单项的文本
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要更改文本的菜单项的名称。
在“文本”框中进行更改。
链接菜单项
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要应用链接的菜单项的名称。
在“链接”文本框中键入链接，或者单击文件夹图标以浏览到相应的文件。
创建菜单项的工具提示
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要为其创建工具提示的菜单项的名称。
在“标题”文本框中键入工具提示的文本。
指定菜单项的目标属性

目标属性指定要在何处打开所链接的页面。例如，可以为菜单项分配一个目标属性，以便在站点访问者单击链接时，在新浏览器窗口中打开所链接的页面。如果您使用的是框架集，则还可以指定要在其中打开所链接页面的框架的名称。

在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要分配目标属性的菜单项的名称。
在“目标”框中输入以下四个属性之一：

_blank

在新浏览器窗口中打开所链接的页面。

_self

在同一个浏览器窗口中加载所链接的页面。这是默认选项。如果页面位于框架或框架集中，该页面将在该框架中加载。

_parent

在文档的直接父框架集中加载所链接的文档。

_top

在框架集的顶层窗口中加载所链接的页面。

关闭样式

您可以禁用菜单栏构件的样式，以便可以在“设计”视图中更清楚地查看构件的 HTML 结构。例如，当您禁用样式时，菜单栏项以项目符号列表形式显示在页面上，而不是显示为菜单栏中带样式的菜单项。

在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中单击“禁用样式”按钮。
更改菜单栏构件的方向

可以将菜单栏构件的方向从水平更改为垂直或者从垂直更改为水平。您只需修改菜单栏的 HTML 代码并确保 SpryAssets 文件夹中有正确的 CSS 文件。

下例将水平菜单栏构件更改为垂直菜单栏构件。

在 Dreamweaver 中，打开包含水平菜单栏构件的页。
插入垂直菜单栏构件（“插入”>“Spry”>“Spry 菜单栏”）并保存页面。此步骤可确保在站点中包含与垂直菜单栏相对应的正确的 CSS 文件。
注： 如果站点中的其它位置中已有垂直菜单栏构件，则不必插入新的垂直菜单栏构件， 只需将 SpryMenuBarVertical.css 文件附加到该页面，方法是在“CSS 样式”面板（“窗口”>“CSS 样式”）中单击“附加样式表”按钮。
删除垂直菜单栏。
在“代码”视图（“视图”>“代码”）中，找到 MenuBarHorizontal 类，将其更改为 MenuBarVertical。MenuBarHorizontal 类是在菜单栏 (<ul id="MenuBar1" class="MenuBarHorizontal">) 的容器 ul 标签中定义的。
在菜单栏的代码后面，查找菜单栏构造函数：

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

从构造函数中删除 imgDown 预先加载选项（和逗号）：

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

注： 如果将垂直菜单栏转换为水平菜单栏，则添加 imgDown 预先加载选项和逗号。
（可选）如果页面中不再包含任何其它水平菜单栏构件，请从文档头中删除指向先前 MenuBarHorizontal.css 类的链接。
保存该页面。
自定义菜单栏构件

尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改菜单栏构件的 CSS 规则，并创建根据自己的喜好设置样式的菜单栏构件。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprymenubar_custom_cn。

下列主题中的所有 CSS 规则都是指 SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 文件（具体情况取决于您进行的选择）中的默认规则。每当您创建 Spry 菜单栏构件时，Dreamweaver 都会将这些 CSS 文件保存到您的站点的 SpryAssets 文件夹中。这些文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑菜单栏构件的规则，您还可以使用“CSS 样式”面板来编辑菜单栏的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

更改菜单项的文本样式

 

附加到 <a> 标签的 CSS 中包含有关文本样式的信息。还可以向与不同菜单状态有关的 <a> 标签附加多个相关的文本样式类值。

要更改菜单项的文本样式，请使用下表来查找相应的 CSS 规则，然后更改默认值：

要更改的样式	垂直或水平菜单栏的 CSS 规则	相关属性和默认值
默认文本	ul.MenuBarVertical a、ul.MenuBarHorizontal a	color: #333; text-decoration: none;
当鼠标指针移过文本上方时，文本的颜色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	color: #FFF;
具有焦点的文本的颜色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	color: #FFF;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	color: #FFF;
当鼠标指针移过子菜单项上方时，子菜单项的颜色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	color: #FFF;

更改菜单项的背景颜色

附加到 <a> 标签的 CSS 中包含与菜单项的背景颜色有关的信息。还可以向与不同菜单状态有关的 <a> 标签附加多个相关的背景颜色类值。

要更改菜单项的背景颜色，请使用下表来查找相应的 CSS 规则，然后更改默认值：

要更改的颜色	垂直或水平菜单栏的 CSS 规则	相关属性和默认值
默认背景	ul.MenuBarVertical a、ul.MenuBarHorizontal a	background-color: #EEE;
当鼠标指针移过背景上方时，背景的颜色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	background-color: #33C;
具有焦点的背景的颜色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	background-color: #33C;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	background-color: #33C;
当鼠标指针移过子菜单项上方时，子菜单项的颜色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	background-color: #33C;

更改菜单项的尺寸

可以通过更改菜单项的 li 和 ul 标签的 width 属性来更改菜单项尺寸。

找到 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 规则。
将 width 属性更改为所需的宽度（或者将该属性更改为 auto 以删除固定宽度，然后向该规则中添加 white-space: nowrap; 属性和值）。
找到 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 规则。
将 width 属性更改为所需的宽度（或者将该属性更改为 auto 以删除固定宽度）。
找到 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 规则：
向该规则中添加下列属性：float: none; 和 background-color: transparent;。
删除 width: 8.2em; 属性和值。
定位子菜单

Spry 菜单栏子菜单的位置由子菜单 ul 标签的 margin 属性控制。

找到 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 规则。
将默认值 margin: -5% 0 0 95%; 更改为所需的值。