上接Nifty Navigation Using CSS-用CSS做漂亮的导航(一)
Nifty Navigation Using CSS-用CSS做漂亮的导航(二)
作者：Rachel Andrew
翻译：OmegaBomb
Discussion
Nested lists are a perfect way to describe the navigation system that we're working with here. The first list contains the main sections of the site; the sublist under Recipes shows the subsections within the Recipes category. Even without any CSS styling, the structure of the list is still clear and comprehensible, as you can see in Figure 5.
讨论
层叠式列表是我们用来描述导航系统的最好方式。第一个列表包含了整个网站的主要单元；比如食谱的下级列表表示食谱目录下的下级单元。甚至没有CSS样式表，就像下图5一样，列表的结构还是清晰和可理解的。
The navigation remaining logical without the CSS
导航在没有CSS的情况下还是有逻辑性的。
The HTML that we use to mark up this list simply nests the sublist inside the li element of the appropriate main item:
我们组成这个列表只用了简单的下级列表，放在主菜单的li元素内，这段代码是这样的：
<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>
With this HTML, and without any changes to the CSS, the menu will display as shown in Figure 6, "The sublist taking on the styles of the main navigation", where the li elements inherit the styles of the main menu.
只用这段HTML代码，不在CSS内做修改的话，导航就会显示成像图6一样，“下级列表占用了主导航的样式”，li元素继承了主菜单的样式。
Let's add a style rule for the nested list to communicate visually that it's a submenu, and not part of the main navigation:
让我们来加个样式规则，使它看起来像一个下级菜单，而不是主导航的一部分：
#navigation ul ul {
margin-left: 12px;
}
This rule will indent the nested list so that it's in line with the right edge of the border for the main menu, as demonstrated in Figure 7.
这个规则会使缩排列表，使它和主菜单的友边框对齐，如图7所示。
Let's add some simple styles to the li and a elements within the nested list to complete the effect:
让我们在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;
}
How do I make a horizontal menu using CSS and lists?
So far, we've dealt with vertical navigation -- the kind of navigation that will most likely be found in a column to the left or right of a site's main content area. However, site navigation is also commonly found as a horizontal menu close to the top of the document.
用CSS怎么做一个水平的导航？
到这里为止，我们已经做成了垂直的导航--一种网站内容页面左边或者右边最常见的导航。但是，水平网站导航也经常出现在一个网站的顶部。
Solution
As Figure 8 shows, this type of menu can be created using styled lists in CSS. The li elements must be set to display inline so that each list item does not display on its own line.
解决方案
如图8所示，这种形式的菜单能用CSS来实现。li元素必须以inline形式呈现，这样才能使每个列表相不以自己的行显示。
Here's the HTML and CSS that creates this display:
这里是实现这种样式的HTML和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_horiz.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 {
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;
}
Discussion
To create the horizontal navigation, we start with a list that's identical to the one we created for our vertical list menu:
讨论
创建一个水平导航，我们以垂直导航相同的代码开头：
<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>
We style the #navigation container to apply some basic font information, as we did with the vertical navigation. In a CSS layout, this ID would probably also contain some additional styles that determine the navigation's position on the page:
像垂直导航一样，我们定义#navigation这个div容器来实现一些基本的字体规定。在CSS布局中，这个ID还可能包含一些其他样式来规定navigation在页面中的位置：
#navigation {
font-size: 90%;
}
In styling the ul element, we remove the list bullets and default indentation applied to the list by the browser:
在定义ul元素时，我们去除了浏览器里的列表符和默认的缩排：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
The property that transforms our list from a vertical to a horizontal display is applied to the li element:
li元素，最适合把我们的导航从垂直导航转变为水平导航：
#navigation li {
display: inline;
}
After we set the display property to inline, the list looks like Figure 9.
我们把显示变成inline后，列表如图9所示。
All that's left for us to do is to style the links for our navigation:
剩下的，我们只要定义一下导航链接的样式：
#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;
}
If you're creating boxes around each link, as I have here, remember that, in order to make more space between the text and the edge of its container, you'll need to add more left and right padding to the links. To create more space between the navigation items, add left and right margins to the links.
如果你想在每个链接周围留有空隙，就像我这里一样，记住，为了在文字和容器边缘留有更多的空隙，你需要更多左或者右的padding来定义链接。在每个项目间留更多的空隙，加左或者右的margins来定义链接。
How do I create button-like navigation using CSS?
怎样用CSS创建一个按钮式的导航？
Navigation that appears to be composed of clickable buttons is a feature of many web sites. This kind of navigation is often created using images to which effects are applied to make the edges look beveled and button-like. Often, some JavaScript code is used to swap in another image, so the button appears to depress when the user holds the cursor over it or clicks on the image.
Is it possible to create such button-like navigation systems using only CSS? Absolutely!
很多网站都用按钮式的导航。这种导航经常使用图片来使它看起来像按钮。还有更多的使用JavaScript代码来换图片，这样在鼠标放上去时，就点在图片上。
可以只用CSS来创建按钮式的导航系统吗？当然！
Solution
Creating a button effect like that shown in Figure 10 is possible, and fairly straightforward, using CSS. The effect's success hinges on your use of the CSS border properties.
解决方法
可以确定，用CSS做一个像图10那样的按钮式效果是可行的。做成这种效果的关键在于你使用CSS种的border属性。
Here's the code you'll need:
这里是你需要的代码：
<!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_button.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 {
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;
}
Discussion
To create this effect, we'll use the horizontal list navigation described in the section called "How do I make a horizontal menu using CSS and lists?" However, to create the button look, we'll use different colored borders at the top and left than we use for the bottom and right sides of each button. By giving the top and left edges of the button a lighter colored border than we assign to the button's bottom and right edges, we create a slightly beveled effect:
讨论
做成这种效果，我们将会用到做水平导航那部分内容。但是，做成按钮式的效果，我们将在每个按钮的上边和左边用不同颜色的边框而不是下边和右边。通过给按钮的上边和左边边缘浅淡的颜色而不是在按钮的下边和右边，我们做成了下边的效果：
#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;
}
We reverse the border colors for the hover state, which creates the effect of the button being pressed:
我们做相反的颜色边框，使之看上去像按钮被按了下去：
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
Try using heavier borders, and changing the background images on the links, to create effects that suit your design.
试着用深的边框，改变链接的背景图片来做成适合你设计的效果。
本文由www.weber8.com站长OmegaBomb原创翻译 转载请注明出处，请继续关注建站者翻译频道 
|
