本文来自www.sitepoint.com，本站站长OmegaBomb翻译，转载请注明出处
Nifty Navigation Using CSS
用CSS做漂亮的导航(一)
作者：Rachel Andrew
翻译：OmegaBomb
Unless you limit yourself to one-page web sites, you'll need to design navigation. In fact, navigation is among the most important parts of any web design, and requires a great deal of thought if visitors are to move around your site easily.
你需要设计一个导航除非你只想做一个页面的网站。实际上，导航是一个网站重点设计的一部分，如果希望来访的人随意的在你网站里浏览，你需要想到很多。
Making site navigation easy is one area in which CSS really comes into its own. Older methods of creating navigation tended to rely on lots of images, nested tables, and JavaScript -- all of which can seriously affect the usability and accessibility of a site. If your site cannot be navigated using a device that doesn't support JavaScript, for example, not only are you blocking users who have turned JavaScript off, but you're also locking out text-only devices such as screen readers and search engine robots -- they'll never get past your home page to index the content of your site. If your design clients don't care about accessibility, tell them their clunky menu is stopping them from achieving a decent search engine ranking!
制作一个网站的导航系统是CSS能真正的发挥作用。旧式的导航系统依赖于很多的图片，网状的表格，还有JS代码--所有的这些都会严重影响一个网站的使用度和亲和度。比如你的网站导航不能被不支持JS代码的用户使用，那你不仅阻挡了那些关掉JS代码功能的用户，你也阻挡了仅支持文本的阅读器和搜索引擎的robots(爬虫)--他们是永远不会通过你的主页来索引整个网站。如果你网站的设计者不关心亲和度，告诉他们一个难看的导航是会影响一个网站在搜索引擎上的排名。
CSS allows you to create attractive navigation that, in reality, is no more than text -- text that can be marked up in such a way as to ensure that it's both accessible and understandable by all those who can't physically see your design, but still want to get to your content. In this chapter, we'll look at a variety of solutions for creating CSS-based navigation. Some are suited to implementation on an existing site, to make it load more quickly, and boost its accessibility by replacing an old-fashioned, image-based navigation. Others are more suited to incorporation within a pure CSS layout.
CSS允许你创建一个很吸引人的导航，实际上，不仅仅是文本--文本其实可以做成一个既有亲和度又能被那些看不见你设计的得到你网站的内容。在这一章，我们将看到多种创建CSS导航的方案。其中一些适合用在已经存在的网站上，使它被加载的更快，用新的导航替换旧式图片式的导航来提供它的亲和度。另外一些完美的CSS效果更适合于公司企业。
Before you begin, you might want to download this article in PDF format, so you can use it offline, at your leisure. The PDF also includes other chapters from The CSS Anthology: 101 Essential Tips, Tricks and Hacks on using CSS with images, and accessibility and alternative devices.
But now, on with the show.
在你开始之前，你也许想下载这个PDF文档，这样你就可以在线下空闲时使用它。这个PDF文档还包括了一些CSS的章节，教你怎么使用CSS来配合图片还有亲和度等等。
但是现在，回到这篇文章来。
How do I style a structural list as a navigation menu?
For new sites, you're likely to be trying to avoid using tables for layout, or using them only where absolutely necessary. Therefore, a navigation solution that doesn't involve tables is useful; also, by eradicating table elements, you'll find that your page contains far less markup.
怎么样来设计一个结构化的导航菜单呢？
对于新站，你可以尽量避免使用表格结构，或者仅仅用在必须要的地方。所以，一个导航系统中，表格并不需要；另外，除去了表格结构，你会发现你的网站结构简化了。
Solution
A navigation system is simply a list of places that users can visit on the site. Therefore, an unordered list is the ideal way to mark up your navigation. The navigation in Figure 1 is marked up as a list, and styled using CSS, as you can see.
方案
一个导航系统是一个用户能访问到的简单的列表。所以，一个无序的列表是理想的方式来做成你的导航。图1中的导航就如你所看到的，是有CSS设计的列表。
图1
<!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;
}
Discussion
To create navigation based on an unordered list, first create your list, placing each navigation link inside a li element:
讨论说明：
创建这个导航基于一个无序列表，首先创建你的列表，每个元素用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>
Next, wrap the list in a div with an appropriate ID:
然后，放进一个div内，用一个合适的ID:
<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>
As Figure 2 shows, this markup looks fairly ordinary with the browser's default styles applied.
就像图2所示，这样就组成了浏览器默认的样式。
图2
The first thing we need to do is style the container in which the navigation sits -- in this case, #navigation:
首先我们要的是给这个div容器定义样式--在这个例子里，#navigation:
#navigation {
width: 200px;
}
I've given #navigation a width. If this navigation system were part of a CSS page layout, I'd probably add some positioning information to this ID as well.
Next, we style the list:
我已经给出了一个#navigation的宽度。如果这个导航是一个CSS页的一部分的话，我也许会加一些定义位置的信息到这个ID.
下面，我们来定义列表样式：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
As Figure 3 illustrates, the above rule removes list bullets and the indented margin that browsers apply, by default, when displaying a list.
就像图3所示，上面的规则去掉了列表默认的前面的小图标和浏览的缩进对齐。
图3 The next step is to style the li elements within #navigation, to give them a bottom border:
下一步就是用#navigation来定义li元素的样式，给他们底部线的宽度：
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
Finally, we style the link itself:
最后，我们来定义链接本身：
#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;
}
Most of the work is done here, creating CSS rules to add left and right borders, remove the underline, and so on. The first property declaration in this rule sets the display property to block. This causes the link to display as a block element, meaning that the whole area of each navigation "button" is active when you move the cursor over it -- the same effect you'd see if you used an image for the navigation.
大部分工作已经完成了，接下来就是加CSS规则进去来定义左边框，右边框，去掉下划线等等。首先是设定display变成block。这可以使链接看上去是静止的元素，而每个导航的“按钮”当你鼠标放上去时是动态的--你用图片做导航也是这个效果。
Can I use CSS and lists to create a navigation system with subnavigation?
Sometimes, more than one navigation level is necessary -- but is it possible to create multi-leveled navigation using styled lists in CSS?
我可以用CSS来做层级导航系统吗？
有时，一只一个导航是必须的--但是，它还能创建所层级导航吗？
Solution
The perfect way to display subnavigation within a navigation system is to create a sublist within a list. The two levels of navigation will be easy to understand when they're marked up in this way -- even in browsers that don't support CSS.
To produce multi-level navigation, we create a nested list and style the colors, borders, and link properties of the new list's items:
方案：
创建下级导航系统的完美解决方案是创建下级列表。在这种组织样式下，两个层级的导航显而易见--甚至是不支持CSS的浏览器。
要制作多层级导航系统，我们需要创建一个网状的列表，定义颜色，边框，还有链接和链接的名称：
<!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="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</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;
}
#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;
}
The result of these additions is shown in Figure 4.
结果如图4所示。
图4
本文由本站站长原翻译，转载请注明出处，本文未完待续，请继续关注本站翻译频道。
------www.weber8.com整理提供  |
