使用CSS开发时髦的导航栏

alabos

3544个读者

译者:
子非鱼
  09/17/2007


原文



[url=javascript:showReferral('使用CSS开发时髦的导航栏（一）')]引用[/url]



双语对照及眉批

除非限制你自己只做单个页面的网站，否则你都需要导航栏。事实上，导航栏是任何网站设计中最主要的部分之一，如果希望用户很容易的在你的站点移动，导航栏的设计需要大量的思考。
制作容易的站点导航栏是
CSS
真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！
CSS
允许你创造具有吸引力的导航栏，采用
CSS
的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于
CSS
的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的
CSS
站点布局中。
如何把一个结构化的列表样式化为导航栏菜单？
对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。
解决方案
导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用
CSS
样式化的一个列表。

图1：样式化列表的导航栏
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lists as navigation
content="text/html; charset=utf-8" />
Recipes
Contact Us
Articles
Buy Online
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
讨论
为了创建一个基于无序列表的导航栏，首先建立你的列表，把每个导航链接放入li元素，就象下面这样：
Recipes
Contact Us
Articles
Buy Online
接着,选择一个适合的ID把列表包含在一个div中：
Recipes
Contact Us
Articles
Buy Online
象下面图2看到的，这个标记在浏览器的缺省样式下面看上相当普通。

图2：没有样式化的基础列表
我们需要做的第一件事情是样式化导航栏存在的容器 – 在这里是 #navigation ：
#navigation {
width: 200px;
}
在这里我简单的给了#navigation一个宽度。如果这个导航系统是
CSS
页面布局的一部分，我可能还会给这个ID添加一些位置信息。
下面，我们样式化列表：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
象图3展示的，上面的规则移除了缺省状态下浏览器显示一个列表时出现的前置符号和缩进。

图3 移除缩进和前置符的列表
下一步是使用#navigation样式化li元素，给它们一个底边：
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
最后，我们样式化link：
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
到此大多数工作已经做好。我们建立的这个
CSS
规则包括增加左右边界，移除下划线等等。在这个规则中第一个属性定义把显示属性设为block，这使得那些链接显示为块元素，这样的话当你光标划过这些导航“按钮”时，显示的效果和使用图片导航一模一样。

我能够使用
CSS
和列表创造有子菜单的导航栏吗？
有时候我们需要超过一级的导航栏 – 可是在
CSS
里面用样式化的列表能够创建多级导航栏吗？

解决方案
在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持
CSS
。
为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lists as navigation
content="text/html; charset=utf-8" />
Recipes
Starters
Main Courses
Desserts
Contact Us
Articles
Buy Online

#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

增加这些以后的显示效果如图4。

图4. 包含子菜单的导航栏
讨论
嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分，在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何
CSS
样式，列表的结构依然清晰且容易理解，就象你在图5看到的一样。

图5：没有使用样式，包含子菜单的导航栏
下面是我们用来在主要项目的li元素里面标记这个简单的嵌套列表的HTML代码：
Recipes
Starters
Main Courses
Desserts
Contact Us
Articles
Buy Online
用HTML，如果简单的使用本文前面的
CSS
，不做任何修改的话，导航菜单的显示将如图6。由于li元素继承主菜单的样式，子列表将呈现出主导航栏一样的样式。

图6：采用默认样式表子菜单导航栏
为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果，让我们增加一个样式规则：
#navigation ul ul {
margin-left: 12px;
}
这个规则将缩进嵌套列表，让它在主菜单的右边界对齐，象图7显示的这样：

图7：带有缩进规则的导航栏
最后让我们给嵌套表里面的li和a元素增加一些简单的样式以便完善效果：
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

如何使用
CSS
和列表构造一个水平菜单？
到目前为止，我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而，导航栏也常常被做成水平菜单紧挨在文本上方。
解决方案
图8显示的这种类型的导航栏可以用
CSS
样式化的列表实现。li元素必须被设置成inline（内联）显示，这样可以避免每个列表元素换行显示。

图8：水平菜单导航栏
这是产生这个显示效果的HTML和
CSS
代码：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lists as navigation
content="text/html; charset=utf-8" />
Recipes
Contact Us
Articles
Buy Online

#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
讨论
为了产生水平导航栏，我们从创建一个和前面垂直导航栏ID一样的列表开始：
Recipes
Contact Us
Articles
Buy Online
象我们在垂直导航栏做的一样，我们样式化#navigation容器，给它设置一些基本的字体信息。如果页面完全是
CSS
布局的话，这个ID可能还会包含一些确定导航栏在页面位置的样式：
#navigation {
font-size: 90%;
}
在ul元素的样式里面，我们移除掉列表在浏览器显示时的标志位和缩进：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
下面是把li元素的显示从垂直变换到水平的属性：
#navigation li {
display: inline;
}
在我们把display属性设定为inline之后，这个列表显示出来象图9一样：

图9：disply:inline的列表显示
我们剩下的工作是样式化导航栏的链接：
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
如果你想像我这样，在每个链接外面创建一个框，记得为了在文本和它的容器边缘留更多的空隙，你必须在链接左面和右边设定更多的padding，为了在导航栏各个项目间增加更多空隙，你必须增加链接左边和右边的margins。

如何用
CSS
创建按钮类型的导航栏？
看上去像是可以点击的按钮组成的导航栏是很多网站的一个特色。这种类型的导航栏常常靠模拟成按钮样子的图片来创建，通常还需要一些Javascript脚本来切换到另一张图片，这样可以模拟按钮被按下或者鼠标在上面高亮显示的效果。
只用
CSS
有可能创造这样类似按钮的导航栏吗？当然！
解决方案
使用
CSS
创建一个象图10显示的按钮效果是可能的，并且比较简单。这个效果的成功与否取决于你对于
CSS
里面border属性的使用能力。

图10：按钮效果的导航栏
这是你需要的代码：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lists as navigation
content="text/html; charset=utf-8" />
/>
Recipes
Contact Us
Articles
Buy Online

#navigation {
font-size:90%
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
讨论
为了创建这个效果，我们将使用在“如何用
CSS
创建按钮类型的导航栏？”章节中描述的水平列表导航栏。与之不同的是，为了创建按钮外观，我们将在每个按钮的上边和左边使用不同于下边和右边的颜色边框。通过给上边和左边赋值比下边及右边的边框亮一些的颜色，我们创建了一个略微突起的效果。
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}

在鼠标停留在上面的状态下，我们反转边框的颜色，这样就创造了按钮被按下的效果。
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
试着使用更深的边框，改变链接的背景图片，去创造属于你自己的设计。


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/6088/showart_971058.html