Daniel Thomson创建的jQuery Navigation Plugin(www.pollenizer.com/jquery-navigation-plugin/)完成了放置列表项的大多数工作,因此,你不需要负责去创建并排按钮、下拉菜单或弹出菜单所必须的那些CSS。然而,你可能想要定制按钮的外观,例如,添加一个背景颜色、删除链接的下划线等。可以参考一些有帮助的样式,用以创建控制菜单的不同元素(例如,打开chapter08教程文件夹中的complete_menu.html文件,然后看看页面的<head>中的CSS)。
注意:下面列出的样式假设主<ul>标签包含了拥有一个诸如<ul id="navigation">的navigation ID的所有菜单和按钮。你可以任意地使用其他的ID名称,例如mainNav、menu,只需要相应地调整下面列出的样式名称。例如,如果你使用mainNav ID,将下面列出的样式#navigation a修改为#mainNav a。
·#navigation ul控制每个菜单的整体外观。将这个样式的padding和margin设置为0是个好主意。
·#navigation li控制每个按钮的样式(然而,正如你将在这个示例中看到的,最好将这个<a>标签上的大多数样式放到每个<li>标签中)。然而,要取消每个按钮旁边的项目符号,至少应该将padding和margin设置为0,将list-style-type属性设置为none。下面是I和li标签的一个很好的默认样式:
#navigation ul,#navigation li{
margin:0;
padding:0;
list-style-type:none;
}
·#navigation a控制每个链接的外观。你可以轻松地使用这一样式:应用背景颜色、字体、字体颜色、加粗线,以便让按钮更突出。然而,避免将margin和padding值设置为0以外的任何值,否则,按钮将会彼此重叠。
·#navigation a:hover控制了链接的悬停或鼠标光标划过的外观。当鼠标放在按钮之上的时候,你可以更改背景颜色,按钮会突出显示,这样可以提供很好的视觉反馈。
·#navigation. stack>a和#navigation.stack>a:hover控制了拥有菜单的链接的外观。你可能想要添加一个背景图片(例如,向下的箭头)来表示这些按钮可以打开一个菜单,或者在视觉上与那些没有菜单的按钮能够区分开。
·#navigation ul. stack>a和#navigation ul.stack>a:hover为子菜单提供了样式。也就是说,通过按钮打开一个菜单,而这个菜单本身是按钮的一部分。例如,在图8-4中,Gizmos和Gadgets按钮都有子菜单。你不需要给这些按钮使用不同的样式,该插件会以某种不同的方式显示这些菜单。在图8-4中,你会看到从上面打开的一个菜单(例如,当鼠标光标放在Our Products上的时候),它在按钮下生成一个下拉式菜单,但是,子菜单是从按钮的(Gizmo和Gadgets)的右边打开的。如果你想要使用一个箭头图形来表示一个菜单,对于顶层的菜单,你可能想要使用一个向下的箭头;而对于其他的菜单,可能是一个向右的箭头。可以将complete_menu.html文件中的CSS作为示例。
·清除菜单后面的漂移。该插件使用CSS float属性来并排地放置主菜单中的菜单按钮。因此,跟在菜单后面的文本或其他内容可能会滑到紧挨着菜单的右侧。为了预防这种折返,应该给紧跟在菜单后面的内容的样式格式添加clear:left。做到这点的一种很容易的方式,就是创建如下所示的一个类样式:
.clearLeft{clear:left;}
然后,将此类应用于紧跟在菜单的<ul>之后的标签。例如,假设有一个段落标签跟在nav菜单之后。可以编写如下代码来创建开始的<p>标签:
<p class="clearLeft">