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

关于菜单栏构件

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

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

查看完全大小图形
菜单栏构件（由

、
• 和 标签组成）
  

  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 标签中定义的。
  在菜单栏的代码后面，查找菜单栏构造函数：
  

  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 类非常有用，在使用面板的“当前”模式时尤其如此。

  更改菜单项的文本样式

  
  
   

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

  
  要更改菜单项的文本样式，请使用下表来查找相应的 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;

  
  更改菜单项的背景颜色
  
  

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

  
  要更改菜单项的背景颜色，请使用下表来查找相应的 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%; 更改为所需的值。