上接：
Nifty Navigation Using CSS-用CSS做漂亮的导航(一)
Nifty Navigation Using CSS-用CSS做漂亮的导航(二)
Nifty Navigation Using CSS-用CSS做漂亮的导航(三)
Nifty Navigation Using CSS-用CSS做漂亮的导航(四)
作者：Rachel Andrew
翻译：OmegaBomb
How do I create rollovers in CSS without using JavaScript?
CSS-based navigation can provide some really interesting effects, but there are still some effects that require the use of images. Is it possible to enjoy the advantages of text-based navigation and still use images?
怎么不用JS而用CSS创建一个“滚转”效果呢？
用CSS做的导航确实可以提供一些有趣的效果，但是还有一些效果需要用到图片。可以将文字式导航和图片混用吗？
Solution
It is possible to combine images and CSS to create JavaScript-free rollovers. This solution is based on a technique described at WellStyled.com. Here's the code you'll need:
方法
通过合并图片和CSS代码是可以实现像JavaScript那样的“滚转”效果。方法是基于在WellStyled.com上面的技术。这里是你所需要的代码：
<!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="images.css" />
</head>
<body>
<ul id="nav">
<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>
</body>
</html>
ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("peppers.gif") top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}
The results can be seen in Figure 17, but to enjoy the full effect I suggest you try it for yourself. Don't forget to click on a link or two!
结果如图17所示，但是你像看到所有效果，我建议你自己试一下。不要忘记在链接上点两下！
Discussion
This solution offers a means of using images in your navigation without having to resort to preloading lots of separate files.
The navigation has three states, but these states aren't depicted using three separate images. Instead, we use one large image that contains images for all three states, as shown in Figure 18.
讨论
这个方法使你不需要预载入很多的文件就可以实现那个效果。
这个导航有三种状态，这三种状态并不是用三张分开的图片来描述的。而是，我们用一张大的图片涵盖了所需要的所有图片，如图18所示。
The navigation is marked up as a simple list:
这个导航就像一个简单的列表一样组成：
<ul id="nav">
<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>
We control the display of the background image within the declaration block for the navigation links. However, because the image is far bigger than the area required for this element, we only see the yellow pepper at first:
我们通过导航链接的声明来控制背景图片的显示。但是，因为这个图片比我们所需要的大的多，所以首先我们只能看见黄色的辣椒：
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("peppers.gif") top left no-repeat;
text-decoration: none;
}
When the :hover state is activated, the background image moves up the exact number of pixels required to reveal the red pepper. In this example, I had to move it by 69 pixels, but this figure will vary depending on the image that you use. You could probably work it out mathematically, or you could do as I do and simply increment the background position a few pixels at a time, until it appears in the right location on hover:
当:hover活动时背景图片向上移动一个确切像素的距离，显示红色的辣椒。在这个例子里，我必须移动69像素，但是这取决于你用的图片。你可以用数学方法计算出来，或者，你可以像我一样，简单的每次移动一点距离，直到正确的位置：
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
When the :active state is activated, the background image shifts again, this time to display the green pepper when the link is clicked:
当:active标签活动时，背景图片又上浮，当链接被点击时显示绿色的辣椒：
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}
That's all there is to it! The effect can fall apart if the user resizes the text in the browser to a larger font, which allows the edges of the hidden images to display. You can anticipate this eventuality to some degree by leaving quite a large space between each of the three images -- keep this in mind when preparing your images.
Image Flickering in Internet Explorer
This technique sometimes causes the navigation to "flicker" in Internet Explorer. In my tests, this only tends to be a problem when the image is larger than the ones we've used here; however, if your navigation items flicker, a well-documented remedy is available.
当用户改变浏览器字体大小时，这个效果就失败了，会使隐藏的图片漏出来。你可以在做图片时留空出来。
IE浏览器里图片的Flicker效果
这个技术有时在IE中叫做"Flicker"。在我的测试中，这里唯一的问题是图片比我们所需要的大；但是，如果你的导航是flicker，是可以补救的。
How can I create pure CSS drop-down menus?
In the previous section, we learned to create image- and JavaScript-free rollovers. Can the same be achieved for drop-down menus?
怎么样创建一个CSS下拉菜单？
在前面的单元里，我们学会了创建图片和JS滚转效果。能用同样的方法实现下拉菜单吗？
Solution
The answer is yes ... but the resulting menus don't work in Internet Explorer 6! Nevertheless, Figure 19 illustrates this interesting technique, which will become more useful as Internet Explorer 7 gains market share.
方法
回答是可以的...但是最终的结果不能在IE6中显示！然而，图19阐明了这种有趣的技术，在IE7的市场将越来越有用。
Here's the markup used for this example:
这里是例子的组成部分：
<!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>CSS Flyout menus</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menus.css" />
</head>
<body>
<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
<li><a href="#">Main courses</a>
<ul>
<li><a href="">Meat</a></li>
<li><a href="">Fish</a></li>
<li><a href="">Vegetarian</a></li>
</ul>
</li>
<li><a href="#">Desserts</a>
<ul>
<li><a href="">Fruit</a></li>
<li><a href="">Puddings</a></li>
<li><a href="">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>
And here are the style rules to implement this effect:
这里是实现这种效果的样式规则：
body {
font: 1em Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font-size: 80%;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
* html #nav a {
width: 100%;
}
#nav ul {
display: none;
position: absolute;
padding: 0;
}
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
#nav li:hover ul {
display: block;
}
Discussion
Though this attractive and easy effect will not work in Internet Explorer 6, it is supported by several other, newer browsers. This solution allows you to create a drop-down menu without using any JavaScript at all. The technique is based on the Suckerfish Dropdowns solution detailed on A List Apart.
The menus themselves are based on simple unordered lists. The top-level menu items consist of one main list; the items that fall under each main item are contained in nested lists:
讨论
尽管这种吸引人又简单的效果不能在IE6中实现，但它可以被其他新的浏览器支持。这个方法允许你不实用任何JavaScript代码创建一个菜单。这个技术基于Suckerfish Dropdowns solution。
菜单本身基于简单的无序列表。最上面一级的菜单相包含了主要的列表；每一个项目又包含网状的列表：
<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
⋮
As you can see in Figure 20, when styles aren't applied to the menu, the page displays as a logically structured, unordered list with subsections that are easy to spot.
如图20所示，当样式不应用于菜单时，页面显示出逻辑上的结构--无序列表和它的下级单元。
To begin with, we style the top-level menu, removing its list style. We also float the list items to the left so that they stack horizontally. The list items are given a position value of relative so that we can position our fly-out menus within them later on:
开始，我们定义第一级菜单的样式，去除它的列表样式。我们使列表向左边漂浮，让它看上去水平。列表的每一项给出了关系：
#nav, #nav ul {
⋮
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
⋮
margin-right: 1em;
}
We coerce the links in the menu to display as blocks, so they fill the rectangular areas defined by the menu items. Internet Explorer 6 (and earlier) doesn't recognize this; however, setting the width of each link to 100% ensures that our clickable region expands to fill the containing block.
我们强迫菜单里的链接显示的像块，填满菜单的矩形区域。IE6（或者以前的版本）不能识辨出这点；但是设定每个链接的宽度是100%可以保证我们可点击的部分扩展到每个快。
#nav a:link, #nav a:visited {
display: block;
⋮
}
* html #nav a {
width: 100%;
}
Next, we style the nested lists that constitute our fly-out menus so that, by default, they are not displayed (display: none). We do, however, specify that absolute positioning is to be used when they are displayed, so that they don't affect the flow of the rest of the document:
下面，我们定义网状的列表，默认，他们是不显示的。
#nav ul {
display: none;
position: absolute;
⋮
}
To prevent our fly-out menu list items from being floated horizontally the way the main menu items are, we need to set their float property to none:
为了防止我们的菜单水平对齐，我们需要设定float项的值为none:
#nav ul li {
float: none;
⋮
}
Finally, we use the :hover pseudo-class to display the fly-out menu within any main menu item when the cursor is moved over it:
最后，当我们鼠标移上去时，用:hover来显示弹出式菜单：
#nav li:hover ul {
display: block;
}
With these basic CSS rules in place, the menus display as shown in Figure 21.
使用这些基本的CSS代码之后的效果如图21所示。
This code initially sets the nested lists to display: none. When the user hovers the cursor over a main menu list item, the property of the nested list within that list item is set to display: block, and the menu appears. However, this approach doesn't work in Internet Explorer, as in that browser the :hover pseudo-class works only on links -- not on any other element.
The rest of the CSS simply applies visual styles to make the menus look good.
Falling Between the Cracks
When a fly-out menu opens, the user must move the cursor down to the fly-out menu items to select one. If, in this motion, the cursor moves outside of the list item that opened the fly-out menu, the menu will close immediately, as the :hover pseudo-class will no longer be in effect.
Looking at the style rules for this page, you can see that we use absolute positioning to display the nested list over the top of the rest of the page content without disturbing it.
In theory, we should be able to leave a little space between the top-level menu item and the fly-out menu simply by adding margin to the top of the list; however, in Internet Explorer 7 the fly-out menu will disappear if the cursor passes over a margin area, rendering the menu unusable. Instead, I've created the effect by applying a white border to the top of the menu.
I've also added a very small margin to the top of each list item, and a negative margin of the same amount to the bottom. This has the effect of shifting our menu down by one pixel -- just enough to ensure that our white border doesn't cover up the bottom of our top-level menu item.
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
Accessibility Concerns
When you're using any drop-down menu -- with or without JavaScript -- make sure that users who don't see the full effect of the menus are still able to move around your site.
In the case of this example, users who don't have CSS support will see the expanded nested lists, and will be able to navigate through the site. Anyone who uses a browser that doesn't support the display of the submenus, such as Internet Explorer 6, will still be able to navigate so long as the pages to which the top-level menu items link contain links to all the pages in that section's submenu.
Any menu system that prevents users whose browsers don't support it from navigating the site is bad news.
Summary
This chapter has discussed a range of different ways in which we can create navigation using structurally sound markup, and provided examples that can be used as starting points for your own experiments.
On existing sites where a full redesign is not possible, introducing a CSS-based navigation system can be a good way to improve the site's accessibility and load speed without affecting its look and feel in a big way.
Where to next? Download this article in PDF format, and you'll also receive two other chapters:
- Chapter 3, CSS and Images, which demonstrates the basics of working with images and answers common image-related questions
- Chapter 8, Accessibility and Alternative Devices, which moves through the basics of separating content from presentation before dealing with questions of alternative style sheets and addressing users' particular accessibility needs
------www.weber8.com原创翻译 转载请注明出处 请继续关注建站者（翻译频道） |
