Question

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

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

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

你会使用一张简单的桌子吗（我知道人们会把它们当作坏事，但还记得我是个菜鸟吗？）
使用CSS相对定位是否明智？或者考虑到不同的浏览器以不同的方式实现这一点，这是不是很糟糕？
您可以使用JQuery轻松实现吗？还是GWT？

引擎盖下的代码（并在此问题下显示）将此菜单显示为无序列表，但我认为无序列表通常是垂直的，看起来更像是我发布的问题列表。在这种情况下，<ul>元素如何用作菜单？

    <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>

提前感谢您的帮助！在我提出的最后一个结构相似的问题中，你的帮助很大。在阅读你的回答之后，我真的明白了我读过的概念要好得多：）

Answer 1

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

<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>

然后我会像这样使用CSS：

请注意float: left;样式上的.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;
}

好吧，老实说我不会这样做完全这样......我可能更喜欢跳过<div>元素并将id="nav"放在{ {1}}元素......用这种方式感觉更多语义。

Answer 2

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

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

Answer 3

现在很常见的是使用无序列表来创建导航按钮。

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

a:hover {
  color: red;
}

Answer 4

这就是你所需要的。它非常简单，因此，毫无疑问它适用于任何重要的事情（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;
}

没有桌子。由于这是一行可变宽度列，因此没有必要。
不需要相对定位，只需启用float: left;。
无需为此实现任何客户端脚本。最好在控制视图的任何逻辑中设置class =“youarehere”，以便它可以继续页面加载（不需要等待DOM和JS加载然后找出当前的顶级）
UL对于各种列表在语义上都是正确的，这实际上就是导航（无论是垂直还是水平）

Answer 5

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

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

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

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

你会如何编码：SO菜单

5 个答案: