Nifty Navigation Using CSS-用CSS做漂亮的导航(三)
上接[url=http://www.weber8.com/html/21/0/368/1.htm][color=#333333]Nifty Navigation Using CSS-用CSS做漂亮的导航(一)[/color][/url]
[url=http://www.weber8.com/html/21/0/567/1.htm][color=#810081]Nifty Navigation Using CSS-用CSS做漂亮的导航(二)[/color][/url]
[align=center]Nifty Navigation Using CSS-用CSS做漂亮的导航(三)[/align][align=center][color=#0000ff][color=#333333]作者：[/color]Rachel Andrew[/color][/align][align=center][color=#0000ff]翻译：OmegaBomb[/color][/align]How do I create tabbed navigation with [url=http://www.sitepoint.com/glossary.php?q=C#term_8][color=#0000ff]CSS[/color][/url]?Navigation that appears as tabs across the top of the page is a popular navigation choice. Many sites create tabs using images. However, this approach suffers from the problems associated with text contained in images, which we discussed in the section called "How do I replace image-based navigation with CSS?" However, it is possible to create a tab effect by combining background images and text styled with CSS.
怎样用CSS做一个标签式的导航？
页面的顶部用标签式的导航是一个流行的选择。很多网站用图片来做标签。但是，这就遇到了文字和图片的问题，这个问题我们在前面的单元已经讨论过了。但是，用CSS结合背景图片和文字是可以实现标签效果的。
[i][b]Solution[/b][/i]The tabbed navigation shown in Figure 11 can be created by styling a horizontal list.
方法
图11所示的标签式的导航可以用水平列表来实现。
[img=400,269]http://i2.sitepoint.com/graphics/navigation_tabbed-style-css.png[/img]
Here's the [url=http://www.sitepoint.com/glossary.php?q=H#term_75][color=#0000ff]HTML[/color][/url] and CSS that creates this effect:
这是实现这个效果的HTML和CSS代码：
[size=2][color=#8b0000]<!DOCTYPE html PUBLIC "-//[/color][/size][url=http://www.sitepoint.com/glossary.php?q=W#term_49][size=2][color=#8b0000]W3C[/color][/size][/url][size=2][color=#8b0000]//DTD [/color][/size][url=http://www.sitepoint.com/glossary.php?q=X#term_63][size=2][color=#8b0000]XHTML[/color][/size][/url][size=2][color=#8b0000] 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"
c />
<link rel="stylesheet" type="text/css" href="tabs.css" />
</head>
<body id="recipes">
<div id="header">
<ul id="tabnav">
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>
<div id="content">
<h1>Recipes</h1>
<p>Lorem ipsum dolor sit amet, ... </p>
</div>
</body>
</html>[/color][/size]
[size=2][color=#8b0000]body {
font: .8em/1.8em verdana, arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 0 10% 0 10%;
}[/color][/size]
[size=2][color=#8b0000]#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}[/color][/size]
[size=2][color=#8b0000]#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}[/color][/size]
[size=2][color=#8b0000]#header li {
float: left;
background-image: url("images/tab_left.[/color][/size][url=http://www.sitepoint.com/glossary.php?q=G#term_24][size=2][color=#8b0000]gif[/color][/size][/url][size=2][color=#8b0000]");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}[/color][/size]
[size=2][color=#8b0000]#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}[/color][/size]
[size=2][color=#8b0000]#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}[/color][/size]
[size=2][color=#8b0000]#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color:#FFFFFF;
}[/color][/size]
DiscussionThe tabbed navigation approach I've used here is a basic version of [url=http://www.alistapart.com/articles/slidingdoors/][color=#0000ff]Douglas Bowman's Sliding Doors of CSS method[/color][/url], which is a tried and tested technique for creating a tabbed interface. The structure that I've given to the navigation menu is the same kind of simple unordered list that we've worked with so far, except that each list item is assigned a class attribute that describes the link it contains. We've also wrapped the entire list in a div with an id of header. The technique takes its name from the two images used to implement it -- one overlaps the other, and the images slide apart as the text size increases.
讨论
我这里用的这个标签式导航是Douglas Bowman边门式的基本形式，用来试验标签。这个导航的结构是我们用过的一个简单的无序列表，除了列表项目用来描述链接的class。我们已经把整个列表放在一个header的一个div中。这个技术用2张图片来实现，其中一张图片重叠另外一张图片，而且，当文字伸展时，图片自动平铺。
You'll need four images to create this effect: two to create the regular tab color, and two to use when the tab is the currently selected (highlighted) tab. The images I've used in this example are shown in Figure 12. As you can see, they're far wider and taller than would generally be necessary for a tab?this provides plenty of space for the tab to "grow" if the user's browser is configured to display text at a very large size.
你需要4张图片来实现这个效果：2张实现正常的颜色，还有2张是在标签被选中时的图片。图12中显示的是我在这里例子中图片。如你所见，他们比标签需要的更宽，更高？这使在用户的浏览器的字体很大时，标签有充裕的空间去扩展。
[img=400,211]http://i2.sitepoint.com/graphics/navigation_files-for-tabs.png[/img]
Here's the basic list of navigation items:
这是导航列表的项目：
[size=2][color=#8b0000]<div id="header">
<ul id="tabnav">
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>[/color][/size]
The first step is to style the container that surrounds the navigation. We're going to give our header a simple bottom border for the purposes of this exercise, but on a real-world site this container may hold other elements in addition to our tabs (such as a logo or search field):
第一步是定义包含导航的容器(div)。我们将给我们的header加底部实线，但在现实网站中，可能在标签中还会有其他的元素(比如logo或者搜索引擎)：
[size=2][color=#8b0000]#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}[/color][/size]
As you'll have noticed, we float the header to the left. We'll also float the individual list items; floating the container that houses them ensures that they remain contained once they're floated, and that the border will display below them.
Next, we create a style rule for the [size=3][color=#990000]ul[/color][/size] element inside the header:
和你观察到的一样，我们把header放在左边。我们也会使各个列表项漂浮；定义div的float属性使他们固定，边框就在下面显示。
下面，我们定义一个header中的ul的样式规则：
[size=2][color=#8b0000]#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}[/color][/size]
This rule removes the bullets and alters the margin and padding on our list -- we've added two ems of padding to the top of the [size=3][color=#990000]ul[/color][/size] element. Figure 13 shows the results of our work so far.
这里去掉了圆点(列表前的圆点)，改变了列表的margin和padding属性--我们在ul元素里的padding-top里添加2em。图13显示了我们的结果。
[img=400,271]http://i2.sitepoint.com/graphics/navigation_styled_ul.png[/img]
Now we need to style the list items:
现在我们需要定义列表中的项目：
[size=2][color=#8b0000]#header li {
float: left;
background-image: url("images/tab_left.gif");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}[/color][/size]
This rule uses the [size=3][color=#990000]float[/color][/size] property to position the list items horizontally while maintaining the block-level status of each. We then add the first of our "sliding door" images -- the thin left-hand side of the tab -- as a background image. A single-pixel right margin on the list item creates a gap between one tab and the next. Figure 14 shows that the left-hand tab image now appears for each tab.
这个规则用了float属性来水平定位列表项。接下来我们添加第一张“滑动门”图片--标签左边细的那张--作为背景图片。一个像素的右边距使列表项前后之间有一点空隙。如图14所示，左手标签的图片已经在出现在每个标签上。
[img=400,271]http://i2.sitepoint.com/graphics/navigation_tabs-reflect-new-style.png[/img]
Next, we style the links, completing the look of our tabs in their unselected state. The image that forms the right-hand side of the tab is applied to each link, completing the tab effect:
接下来，我们来定义链接，完成标签在未被选中时的样式。标签右边的图片已经应用于每个链接：
[size=2][color=#8b0000]#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}[/color][/size]
The results are shown in Figure 15.
结果如图15所示。
[img=400,270]http://i2.sitepoint.com/graphics/navigation_tabs-style-links.png[/img]
If you increase the text size in the browser, you can see that the tabs neatly increase in size too. In fact, they do so without overlapping and without the text protruding out of the tab -- this is because we have used images that allow plenty of room for growth.
如果你增加浏览器的文字大小，你会看到标签也跟着变大。实际上，这是由于我们在用图片时已经给定了变大充裕的空间。
To complete the tab navigation, we need to highlight the tab that corresponds to the currently displayed page. You'll recall that each list item has been assigned a unique class name. If we assign to the [size=3][color=#990000]body[/color][/size] element an ID that has a value equal to the value of each list item class, CSS can do the rest of the work:
要完成这个导航，我们需要选中标签时显示对应的网页。你会想起我们已经在每个列表项给定了一个唯一的class。如果我们给body一个ID，这个ID的值相当于每个列表项的class，那CSS就可以做剩下的事情了：
[font=NSimsun][size=2][color=#8b0000]<body id="recipes">[/color][/size][/font]
Although it looks like a lot of code, the CSS code that styles the tab matching the [size=3][color=#990000]body[/color][/size] ID is relatively straightforward. The images I've used are exact copies of the left and right images that we applied to the tabs, but they're a different color, which produces the effect of one tab appearing to be highlighted.
Here's the CSS:
虽然，看上去又很多的代码，用来定义body的ID的CSS代码使简单的。我用在标签上的图片这里再复制一遍，但是他们是不同颜色的，形成了被高亮选中的效果。
CSS是这样的：
[size=2][color=#8b0000]#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}[/color][/size]
[size=2][color=#8b0000]#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color: #FFFFFF;
}[/color][/size]
With these rules in place, specifying an ID of [size=3][color=#990000]recipes[/color][/size] to our body will cause the [b]Recipes[/b] tab to be highlighted, specifying contact will cause the [b]Contact Us[/b] tab to be highlighted, and so on. The results of this work are shown in Figure 16.
用了这些规则以后，尤其是body的recipes的ID使“食谱”被高亮选中，使Contact Us的标签被高亮等等。结果如图16所示。
[img=400,267]http://i2.sitepoint.com/graphics/navigation_highlight-contact-us.png[/img]
------本文由[url=http://www.weber8.com/][color=#810081]www.weber8.com[/color][/url]站长OmegaBomb原创翻译，转载请注明出处 请继续关注<建站者>翻译频道 [img=17,17]http://www.weber8.com/final.gif[/img] 哎呀！～深！！
页:
[1]