制作容易de站点导航栏是CSS真正展现自己特有能力de一个领域.制作导航条de老方法倾向于依赖大量de图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点de可用性和无障碍性.如果您de站点不能在一个不支持Javascriptde设备上被导航,那么您不仅阻止了关闭Javascriptde用户,同时您也阻止了只支持文本de设备,比如屏幕阅读器已经搜索引擎de机器人程序 – 它们将永远无法从您de首页得到网站内容de索引.就算您de客户不在乎无障碍性,告诉他们笨重de菜单阻止他们得到一个体面de搜索引擎排名!
CSS允许您创造具有吸引力de导航栏,采用CSSde优势在于不仅仅它在外观上非常美观,实际上它还是文本 – 是一种采用特殊方法标注de文本,它能够让所有那些物理上没法看到您de设计但是又想得到您de内容de人或者设备无障碍和容易理解地访问您de站点.在本文中,我将看看各种各样建立基于CSSde导航栏解决方案.其中有一些适合在已有站点实施,以便使这些站点引导更迅速,并且通过替换古板de、基于图片de导航栏来促进它de无障碍性.另外一些更适合集成于纯粹deCSS站点布局中.
如何把一个结构化de列表样式化为导航栏菜单？
对于新设计de网站,您可能会尝试避免使用表格来做布局,或者只是在绝对必要de地方才使用表格.因此,一个不涉及到表格de导航栏解决方案是有用de,同时,通过杜绝表格元素de使用,您会发现您de页面将包含更少de标记符号.
解决方案
导航栏系统是用户在这个站点能够访问de地点de列表.因此,一个无序de列表是标记您de导航栏de理想方式.象您看到de,在图1中de导航栏de实现是采用CSS样式化de一个列表.
图1:样式化列表de导航栏<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#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;
}
讨论
为了创建一个基于无序列表de导航栏,首先建立您de列表,把每个导航链接放入li元素,就象下面这样:
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
接着,选择一个适合deID把列表包含在一个div中:
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
象下面图2看到de,这个标记在浏览器de缺省样式下面看上相当普通.
图2:没有样式化de基础列表
我需要做de第一件事情是样式化导航栏存在de容器 – 在这里是 #navigation :
#navigation {
width: 200px;
}
在这里我简单de给了#navigation一个宽度.如果这个导航系统是CSS页面布局de一部分,我可能还会给这个ID添加一些位置信息.
下面,我样式化列表:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
象图3展示de,上面de规则移除了缺省状态下浏览器显示一个列表时出现de前置符号和缩进.
图3 移除缩进和前置符de列表
下一步是使用#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;
}
到此大多数工作已经做好.我建立de这个CSS规则包括增加左右边界,移除下划线等等.在这个规则中第一个属性定义把显示属性设为block,这使得那些链接显示为块元素,这样de话当您光标划过这些导航“按钮”时,显示de效果和使用图片导航一模一样.
