Tutorial on developing stylish navigation bar legends with CSS_Experience exchange

制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！

CSS允许你创造具有吸引力的导航栏，采用CSS的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于CSS的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的CSS站点布局中。

如何把一个结构化的列表样式化为导航栏菜单？

对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。

解决方案

导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用CSS样式化的一个列表。

图1：样式化列表的导航栏p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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：没有样式化的基础列表

The first thing we need to do is style the container in which the navigation bar exists - in this case #navigation:

#navigation {

width: 200px;

}

Here I simply gave #navigation a width. If this navigation system is part of the CSS page layout, I might also add some location information to the ID.

Next, we style the list:

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

As shown in Figure 3, the above rule removes the prefix and indentation that appear by default when a browser displays a list.

Figure 3 List of removing indents and prefixes

The next step is to style the li elements using #navigation, giving them a bottom edge:

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

Finally, we style the 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;

}

At this point most of the work has been done. The CSS rules we created include adding left and right borders, removing underlines, etc. The first attribute definition in this rule sets the display attribute to block, which causes those links to appear as block elements so that when you move the cursor over the navigation buttons ”, the display effect is exactly the same as using picture navigation.