悠悠博客 关注Ajax技术与web开发

I know what you’re thinking...“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are:
我知道你在想什么……“我们真的需要另一篇关于CSS下拉元素的文章吗？”请允许我说服你。如果我们能有一个清爽的、能把功能和代码简单联系起来，并且抛弃他们的主要问题（不要提降低美观的要求）的良结构的菜单，那会怎么样？下拉菜单的问题是这样的：

their secondary options are inaccesible unless you activate the entire menu system; and
1.它们的第2个选项是难以达到的，除非你让整个菜单系统处于活动状态；并且
they offer insufficient orientation cues for the user. It can be difficult to navigate within a particular section of the site because you have to go back to the dropdown to change pages.
2.它们只为用户提供了不充足的方向指示。所以就很难处理一个特别的内容段，因为你不得不回到下拉菜单的上一层去改变页面。
This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.
这是一项绝妙的技术，它能保证浏览器的兼容性和维护可用性，甚至对那些还在用老的浏览器的用户或者是那些难以使用的下拉菜单也有价值，或者任意一个因为下拉样式而显得无用或者看上去很不舒服的菜单。并且在网站的导向方面，它也比标准的下拉菜单显得更好。

Warning: This technique will not work as well for lists that require large numbers of items, where dropdowns either shine or collapse under the weight of their own sheer mass, depending on your perspective.
警告：这项技术不适用于那些需要很多菜单项的列表，下拉的时候在它们自己的透明块下要么是高亮的要么是折叠的，根据你的审美角度来。

We’re going to create a hybrid menu that runs horizontally across the window. It has two levels of navigation (in our example, main topics and their associated pages). Our menu will allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot.
我们将创建一个混合的菜单，透过窗口水平的显示。它有两个层次的导航菜单（在我们的例子里，为主题和它们相关的页面）。我们的菜单将考虑到在两个导航层里都能访问到所有的页面，实时显示被选择主题下的那些选项，让用户清楚自己在全站的哪里，并且很方便很容易地变换选择。

Sound good? Let’s get going.
听上去很棒吗？那我们开始吧。

First, we need a list
首先，我们需要一个列表
Let’s start with a list of architectural periods and some of their major representatives. We will attach an ID to the <ul> element and classes of “off” and “on” to the main list items (which is probably not the best solution, but will work for this article’s purposes):
让我们从一个有着一系列结构化节点和一些它们主要的内容段的列表开始。我们将给<ul>元素写上ID属性并且给主题菜单项标上“off”和“on”的类属性（也许那不是最好的解决办法，但是对于本篇文章需要达到的目的来说已经足够了）：


<ul id="nav">
<li class="off"><a href="#">Renaissance</a>
<ul>
 <li><a href="#">Brunelleschi</a></li>

 <li><a href="#">Alberti</a></li>
 <li><a href="#">Palladio</a></li>
 <li><a href="#">Michelangelo</a></li>

 <li><a href="#">Bramante</a></li>
</ul></li>
<li class="off"><a href="#">Art Nouveau</a>
<ul>

 <li><a href="#">Mackintosh</a></li>
 <li><a href="#">Guimard</a></li>
 <li><a href="#">Horta</a></li>

 <li><a href="#">van de Velde</a></li>
</ul></li>
<li class="on"><a href="#">Modern</a>
<ul>

 <li><a href="#">Sullivan</a></li>
 <li><a href="#">Le Corbusier</a></li>
 <li><a href="#">Mies</a></li>

 <li><a href="#">Gropius</a></li>
 <li><a href="#">Yamasaki</a></li>
</ul></li>

<li class="off"><a href="#">Postmodern</a>
<ul>
 <li><a href="#">Venturi</a></li>
 <li><a href="#">Eisenman</a></li>

 <li><a href="#">Stern</a></li>
 <li><a href="#">Graves</a></li>
 <li><a href="#">Gehry</a></li>

</ul></li>
<li class="off"><a href="#">Digital</a>
<ul>
 <li><a href="#">Xenakis</a></li>

 <li><a href="#">Lynn</a></li>
 <li><a href="#">Diller+Scofidio</a></li>
 <li><a href="#">Zellner</a></li>

 <li><a href="#">Hadid</a></li>
</ul></li>
</ul>

Get some style on
然后加上点样式
This is a great place to start. Simple, semantic markup that can be maintained easily and in one place. It looks like you would expect it to look.
这是一个开始（加样式）的好位置。同样，从这里开始的话，简单的、语义清晰的标记能使维护工作变的容易。它看上去 就像你希望看到的一样。

The first thing we are going to do with our CSS is to display the primary level horizontally (using float) and hide all of the subnavigation lists. We will also set the display for the links in the list to be bold, colored, and have a border.
这是我们用到CSS的第一个地方，是为了水平显示主题一级的菜单（用到浮动定位）和隐藏所有的子级导航列表。我们将继续设置里表里链接的显示样式，让它们字体加粗、变颜色和有一条边框。


#nav li {
 /*让主列表项浮动*/
 margin: 0;
 float: left;
 display: block;
 padding-right: 15px;
}

#nav li.off ul, #nav li.on ul {
 /*隐藏子级导航菜单*/
 display: none;
}

#nav li a {
 /*设置列表里的链接样式*/
 color: #f90;
 font-weight: bold;
 display: block;
 height: 15px;
 width: 100px;
 border: 1px solid #29497b;
 padding: 5px;
}

Next, let’s position our second nav level below the main list, so that when it does show up again, it’s in the right place.
接下来，我们来定位在主列表下面的二级子菜单，使它再次显示的时候出现在右边。


#nav li.off ul, #nav li.on ul {
 /*把子菜单放到主菜单的下面，然后隐藏它们*/
 display: none;
 position: absolute;
 top: 33px;
 height: 15px;
 left: 0;
 padding-top: 10px;
}
 
Finally, we’ll show the subnavigation bar for the active topic area, “Modern.” The best way to do this if you want only one central, complete menu file, is with a body class of, say, “Modern,” and corresponding selectors. For this article, which will be published in someone else’s body element and should remain self-sufficient, we have set a class of “on” to the active topic and “off” to the inactive topics.
最后，我们来设置当主题区被选中时子菜单条的样式，“时髦。”如果你仅仅需要一个居中的，完整的菜单文件，那么最好的解决办法是写一个带body类的菜 单，可以认为是，“时髦”和一致的选择器。在这篇文章里，那些需要在别的body元素里显示和保留的菜单项，我们已经设置了“on”类样式给活动的主题， 设置了“off”给非活动主题菜单。


#nav li.on a {
 /*为动态主题区域改变线条的颜色*/
 border: 1px solid #f90;
}

#nav li.on ul a, #nav li.off ul a {
 /*去掉活动菜单的子菜单上边框的继承*/
 border: 0;
}

#nav li.on ul {
 /*显示活动的子菜单列表*/
 display: block;
}

After adding a couple borders, you can see what we have so far here.
在加了几个边框后，你可以在这里看到我们的成果。

So they all rolled over and one fell out...
然后它们活动起来了并且相互脱离了……
Now, we activate the rollover. This is not much different than any other CSS dropdown menu — the hover is on the li element, so IE will choke due to its poor implementation of the :hover psuedo-class. We’ll get to that in a minute. The following CSS removes the border on the second nav level, sets the active subnav to always display, and sets the inactive subnavs to display when their parents are hovered. We’ll set a z-index to be sure that the hovers always take precedence over the current topic area’s subnav.
现在，我们让这菜单起伏起来。这跟别的CSS下拉菜单比起来并不是很难——在li元素上设置鼠标经过的样式，然后ie会因为它不支持:hover伪类的实 现而显示异样。我们将在一分钟内完成它。下面的CSS样式删除了子菜单上的边框，设置活动的菜单项一直显示，并且设置非活动的菜单项，只在它们的父级菜单 被鼠标经过时显示。我们将设置一个z-index值来保证鼠标经过时的项总是显示在当前主题的下面。


#nav li.on ul a, #nav li.off ul a {
 float: left;
 /*ie不继承float*/
 border: 0;
 color: #f90;
 width: auto;
 margin-right: 15px;
}

#nav li.on ul {
 /*显示当前主题*/
 display: block;
}

#nav li.off:hover ul {
 /*当鼠标经过其他主题时，显示它们*/
 display: block;
 z-index: 6000;
}

We’ll make it a little more user-friendly, with a background on the hovered tabs.
我们将把它变得看起来舒服一些，给鼠标经过的项加一个背景。


#nav li.off a:hover, #nav li.off:hover a {
 background: #29497b;
 color: #f90;
}
 
Check in on our progress here.
点这里看看我们的进步吧。

Accommodating our “special” browser friends
适应我们那些“特殊的”浏览器朋友
You have two options for users of browsers such as, say, Internet Explorer, which lack support for :hover on anything but the <a> element. You can either leave the menu as is, knowing that it will work beautifully in a few years when all browsers support :hover (knock on wood), and resting in the knowledge that all the navigation options will be visible and accessible to all users, or you can work up a bit of JavaScript to rewrite the CSS selectors in language IE understands to make the dropdown dynamism accessible to all.
你给用户有两个浏览器选择，一个是IE，对:hover伪类支持差，除了对<a>元素能显示，别的都不行的浏览器。你也可以让菜单就这样，想 象在若干年后所有浏览器都支持:hover伪类，你的菜单就能完美工作了（撞木头去吧，别指望了），并且停止在认为所有的导航选项都被所有用户看到和访问 到，或者你可以编一段IE能理解的javascript代码来重写CSS选择器，使这下拉功能里所有的菜单都被访问到。

(Working in IE as-is being relative.) We do have to adjust the positioning a little using the asterisk hack:
（因为在IE下显示的关系，）我们不得不用星号代码把定位稍微调整一下。


#nav li.off ul, #nav li.on ul {
 /*把子菜单放到下面*/
 top: 33px;
 *top: 44px; /*对IE定位的修改*/
}

So it’s working beautifully in modern, standards-compliant browsers, and working in a functional, degraded way, with correct positioning, in versions 5 and 6 of Internet Explorer. With a little help, we can make the hovers work in IE. This simple JavaScript rewrites the hovers as mouseover events, and works for all versions of IE/Win 5x and 6x. Much thanks to Patrick Griffiths and Dan Webb, whose “Suckerfish Dropdowns” got me started with CSS-based menu systems. Their snippet of JavaScript looks like this:


startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName=="LI") {
 node.onmouseover=function() {
 this.className+=" over";
   }
 node.onmouseout=function() {
 this.className=this.className.replace
     (" over", "");
  }
  }
 }
}
}
window.onload=startList;

With a simple change to the CSS:
在CSS下做了一个简单的改变：


#nav li.off:hover ul, #nav li.over ul {
 display: block;
 z-index: 6000;
}

#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
 background: #29497b;
 color: #f90;
}

to add the class “.over” to the list items that require hovering, the list functions just as well for you IE/Win users. Not that you shouldn’t think about a new browser, but for now we’ll continue to support the masses in the manner to which they’ve become accustomed.
为了使鼠标经过时能显示动态效果，所以添加了一个“over”类样式，这列表功能是为在IE下正确显示而写的。你不需要考虑去换一个浏览器，但是你现在必须继续考虑去改变那些已经习惯了的浏览器显示错乱。

So that’s it. An incremental change, perhaps, over the previous work with CSS dropdowns, but another angle for you to explore for those instances where it really is useful to have the navigation options displayed rather than hidden inside a dropdown menu.
就是这样。添加了一些改变，也许，透过之前的工作，可以让你从另一个视角来探索那些例子是否它们对让菜单项显示的价值大于它们隐藏在下拉菜单里的价值。

But can it be beautiful?
但是它能更漂亮吗？
Ok, that’s not it. I couldn’t leave you without a slightly more graphically-rich version to take this technique out of the pedantic and into the real world. With a few changes, a CSS sprite navigation image (thanks, Dave Shea), a photo I took in NYC, and a bit more CSS, we get a menu system which really shows the power of CSS combined with graphic design. Check out the final Hybrid CSS Dropdown, fully functional in all modern browsers.
当然，毫无疑问。我不能留给您一个简易的多图参考的版本从而让这个技术从学术讨论进入现实世界。修改一下，一个用CSS导航图片条（感谢 Dave Shea），一张我在NYC拍的照片，再加一些CSS，我们得到了一个菜单系统，把CSS和图形化设计有机结合的菜单系统。看看最终的混合 CSS下拉元素菜单吧，在所有流行的浏览器里都能完全正常的显示。

About the Author
Eric Shepherd is the founder of arkitrave web media, a small web and graphic firm in Buffalo, New York. He is finishing a Master of Architecture degree at the University at Buffalo. He is also a freelance pianist. His work has been featured in the venerable CSS Zen Garden, and he is a strategic partner of Nepo Strategies, a Buffalo-based e-commerce and web strategy firm. He’s already working on explaining the potential of clean XHTML, CSS, and Javascript combined with the DOM to his brilliant one-month-old daughter Naia.