CSS样式菜单标记的最佳实践是什么？

Question

所以，我一直在“收集”CSS菜单（另一个术语可能是“借鉴”，另一个可能是“厚颜无耻地抄袭”），以从中学习并在自己的项目中重用其中的某些精华。

作为一个老派的HTML纯粹主义者，我喜欢样式化的<ul>和<ol>的想法，更好的菜单和选项卡界面往往使用这种方法，出于可访问性或语义合理性等原因。我主要喜欢这种方法，因为它使我的HTML源代码保持整洁。

现在，我实际上已经重新设计了我的CSS菜单收藏，以适应我从最灵活的示例中推导出来的一个“主”标记模式，例如CSS Zen Garden。它看起来像这样：

<div class="menustyle">
<ul>
    <li class="current"><a href="#" title="Page 1"><span>Home</span></a></li>
    <li><a href="#" title="Page 2"><span>Toys</span></a></li>
    <li><a href="#" title="Page 3"><span>About Us</span></a></li>
    <li><a href="#" title="Page 4"><span>Contact</span></a></li>
</ul>
</div>

<span class="clearit" /><br />

(在结尾处使用“clearit”标签以设置需要此功能的菜单中的“clear:both”)

无论如何，我已经在许多网站上看到了这种标记的变化，有些带有额外包含的<div>，有些使用不同于current的单词，有些将current类附加到<a>标签而不是<li>，有些则省略内部的<span>。每个人似乎都有自己微微不同的菜单标记方式。

总之，在调整了很多菜单后，以上就是我想出来的内容，但我正在尝试弄清楚是否存在实际的最佳做法。我想在某个时候建立一个简单的CSS菜单铸造厂，在进一步进行标记之前，获取关于标记的一些输入将是不错的。

编辑：问题不是关于Javascript菜单的。我知道有出色的脚本化菜单，它们允许您拥有子菜单、更高级别的动画和悬停时间、快捷键、投影和其他所有内容。但90%的菜单不需要这些功能，并且更适合使用CSS进行样式和悬停效果。

- Jens Roland

---

给Stack Overflow设计师们一个额外的问题：为什么你们没有使用样式化列表方法来制作标签页？我试过一次，发现它们并不难复制。 - Jens Roland

Answer 1

除了去掉标签，我认为它很好。

没有必要使用这些标签，因为在您的设置中，您可以使用CSS样式表自由地设置文本样式。

li a {/*styles*/}

你应该也能够删除

标签。

<span class="clearit" /><br />

如果您只是想浮动 div 内部的 ul，那么可以不使用 div。如果您需要清除其他内容，可以使用

<br clear="all"/>

- Birk

---

我有几个菜单，无法删除其中的<span>标签（当然这不是说不能做到）。在某些情况下，您希望A标签与LI一样大（以允许点击），但需要一个较小的<span>来定位或样式化内部的较小区域。之后变得棘手起来。 - Jens Roland

在特定的标记集合周围使用span标签并没有什么问题（尽管我更喜欢strong或em）... 我说你可以放弃它们，因为它们包裹了所有锚点内容。 - Birk

Answer 2

你可以为UL使用“clearfix”类（而不是清除span）：

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

现在，您的菜单将如下所示：

<div class="menustyle">
<ul class="clearfix">
.....

当然，您可以直接将这些属性添加到UL中，以避免更改HTML代码的情况 :)

- Staicu Ionut

Answer 3

如果您有兴趣拥有子菜单，我建议您查看 YUI 库。它为您提供了跨浏览器兼容的标记语言子菜单。

http://developer.yahoo.com/yui/examples/menu/index.html

- Ruadh&#225;n

Answer 4

CSS菜单很麻烦，而且早在2005年就已经过时了。需要考虑跨浏览器兼容性、IE的JavaScript修复文件等等问题。具体回答你的问题：它们与三年前没有什么不同，因为IE7不支持非链接上的:hover，而IE6仍然需要支持。

现在只需下载jQuery，安装Superfish插件并包含以下代码：

$(function() {
  $("ul.menu").superfish();
});

完成了。甚至在IE6上也可以使用（功能较少）。

- cletus

---

我认为你在这里完全错了。我喜欢jQuery，但大多数菜单并不需要Superfish提供的额外花哨功能。此外，跨浏览器CSS现在并不像IE5时代那样困难。即使是Superfish也使用CSS来实现与IE6的兼容性。 - Jens Roland

顺便提一下，由于我的回答已经被downvote两次了：实际上，即使在禁用Javascript的情况下（至少在Firefox中），superfish仍然可以提供工作的CSS菜单（因为IE不支持非链接上的:hover，所以没有菜单会在没有Javascript的情况下工作）。 - cletus