你会如何编码：SO菜单

I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)

我是一个从榜样中学到最好的人。目前，在开发桌面应用程序十五年后，我正在进入Web开发领域。我仍然习惯于用于开发现代网站的所有网络技术以及我看到的任何地方，我看到很酷的小UI元素并质疑它们是如何实现的。所以我想我会问你，网络专家...... wexperts :)

What are some straight forward or creative ways you could code the SO Menu...

您可以通过哪些直接或创造性的方式对SO菜单进行编码......

*徽标|问题|标签|用户|徽章|未答复|空间|问问题

Would you use a simple table (I know people harp on them as being bad, but remember I'm a noob)?
你会用一张简单的桌子（我知道人们会把它们当作坏事，但记得我是个菜鸟）？
Would it be wise to use CSS relative positioning? Or is that bad considering different browsers implement this differently?
使用CSS相对定位是否明智？或者考虑到不同的浏
Could you use JQuery to implement this easily? Or GWT?
你能用JQuery轻松实现吗？还是GWT？
The code under the hood (and shown under this question) shows this menu as an unordered list, but I thought unordered lists are typically vertical and look like more like this list of questions I'm posting. How is the <ul> element being used as a menu in this case?

引擎盖下的代码（并在此问题下显示）将此菜单显示为无序列表，但我认为无序列表通常是垂直的，看起来更像是我发布的问题列表。在这种情况下，如何将
```
    <div id="hmenus">
        <div class="nav">
            <ul>
                <li class="youarehere"><a href="/questions">Questions</a></li>
                <li><a href="/tags">Tags</a></li>
                <li><a href="/users">Users</a></li>
                <li><a href="/badges">Badges</a></li>
```

Thanks in advance for all your help! You were more than helpful in the last, similarly structured question I asked. I really understood the concepts I've been reading about much much better after reading your responses :)

在此先感谢您的帮助！在我提出的最后一个结构相似的问题中，你提供了很多帮助。在阅读完回复后，我真的明白了我读过的概念要好得多:)

5 个解决方案

#1

I would write it something like this (assuming Questions is the current page):

我会写这样的东西（假设问题是当前页面）：

<div class="nav">
    <ul> 
        <li class="youarehere"><a href="/questions">Questions</a></li> 
        <li><a href="/tags">Tags</a></li> 
        <li><a href="/users">Users</a></li> 
        <li><a href="/badges">Badges</a></li> 
        <li><a href="/unanswered">Unanswered</a></li> 
    </ul> 
</div>

Then I would use CSS somewhat like this:

然后我会像这样使用CSS：

Note the float: left; on the .nav li style. That is what makes the list horizontal.

注意浮动：左;在.nav li风格上。这就是使列表水平的原因。

.nav
{
    float: left;
    font-size: 125%;
}
.nav ul
{
    margin: 0;
}
.nav li
{
    background: #777;
    display: block;
    float: left;
    margin-right: 7px;
}
.nav .youarehere
{
    background: #f90;
}
.youarehere a
{
    color: #fff;
}
.nav li:hover
{
    background-color: #f90;
}
.nav a
{
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 6px 12px 6px 12px;
    text-decoration: none;
}

Okay, to be honest I wouldn't do it exactly like this... I would probably prefer to skip the <div> element and put id="nav" on the <ul> element... Feels more semantic that way.

好吧，说实话，我不会这样做...我可能更喜欢跳过

元素并将<=>元素放在

#2

http://css.maxdesign.com.au/listamatic/

This should help you out, it has a number of examples and guides on various css menus!

这应该可以帮到你，它有各种css菜单的例子和指南！

#3

It is common nowadays to use unordered lists to create navigation buttons.

现在通常使用无序列表来创建导航按钮。

You don't need jQuery nor GWT for something like this, use the :hover pseudoclass

你不需要jQuery或GWT这样的东西，使用：hover pseudoclass

a:hover {
  color: red;
}

#4

This is all you need. It's very simple and because of that, its no surprise that it works in anything that matters (IE 5.5-8, Opera, FF, Safari, and Chrome).

这就是你所需要的。它非常简单，因此，毫无疑问它适用于任何重要的事情（IE 5.5-8，Opera，FF，Safari和Chrome）。

.nav ul, .nav li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
}
.nav a {
    display: block;
    background-color: #777777;
    color: #fff;
    padding: 7px;
    margin-right: 5px;
    font: normal bold 16px Arial,Helvetica,sans-serif;
    text-decoration: none;
}
.nav a:hover,
.nav .youarehere a {
    background-color: #FF9900;
}

No tables. Since this is one row of variable width columns, there's no need.
没有桌子。由于这是一行可变宽度列，因此没有必要。
Relative positioning isn't necessary, just get your float: left; on.
相对定位是没有必要的，只需要你的浮动：左;上。
No need to implement any client-side scripting for this. It's best to set the class="youarehere" in whatever logic is controlling the view so that it is ready to go on page load (doesn't need to wait for DOM and JS to load and then figure out the current top-level).
无需为此实现任何客户端脚本。最好在控制视图的任何逻辑中设置class =“youarehere”，以便它可以继续页面加载（不需要等待DOM和JS加载，然后找出当前的*）。
UL's are semantically correct for all sorts of lists, which is really what navigation is (regardless of whether its vertical or horizontal)
UL对于各种列表在语义上都是正确的，这实际上就是导航（无论是垂直还是水平）

#5

I would use an unordered list for the navigation. The li elements would be floated left. The anchors within the li's would be styled to give the needed look.

我会使用无序列表进行导航。 li元素将向左浮动。 li中的锚将被设计为具有所需的外观。

Rather than using a youarehere class on the active link, I'd apply a class to the body and show the active links somewhat like this: body.questions ul.nav li.questions-link:link, body.questions ul.nav li.questions-link:visited {...}. (Probably not using this much of a selector). The body class allows you to do further customisation without much hassle (i.e. different background images or colour schemes and so on).

我没有在活动链接上使用youarehere类，而是将一个类应用于正文并显示活动链接，如下所示：body.questions ul.nav li.questions-link：link，body.questions ul.nav li .questions-link：访问{...}。（可能没有使用这么多的选择器）。正文类允许您进行进一步的自定义而不会有太多麻烦（即不同的背景图像或颜色方案等）。

The SO logo would be a h1 using image replacement with CSS to show the image instead.

SO徽标将是h1，使用CSS替换图像来显示图像。

Any IE browser issues would be handled with conditional comments.

任何IE浏览器问题都将通过条件注释来处理。

#1