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

【问题标题】：What is the best practice for CSS-styled menu markup?CSS 样式菜单标记的最佳实践是什么？
【发布时间】：2010-10-03 22:39:13
【问题描述】：

所以，我已经“收集”CSS 菜单有一段时间了（另一个术语是“借用”，另一个术语是“公然抄袭”），以向它们学习并可能重用其中的一些细节在我自己的项目中。

作为一个老式的 HTML 纯粹主义者，我喜欢样式化 <ul>s 和 <ol>s 的想法，更好的菜单和选项卡界面倾向于使用这种方法，以实现可访问性或语义健全性或其他原因。我主要喜欢这种方法，因为它使我的 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 来设置样式和悬停效果会更好。

【问题讨论】：

还有一个给 Stack Overflow 设计者的额外问题：为什么不使用样式列表方法来制作标签？我只是试了一下，它们并不难复制。

标签： html css menu

【解决方案1】：

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

没有理由使用它们，因为您可以根据自己的设置设置文本样式

li a {/*styles*/}

你也应该能够删除

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

部分也是如此。如果您试图仅将 ul 浮动在 div 内，则不妨废弃 div。如果您出于其他原因需要清除，您可以这样做

<br clear="all"/>

【讨论】：

我有几个菜单无法去掉跨度（当然，这并不是说不能这样做）。在某些情况下，您希望 A 标签与 LI 一样大（以允许单击），但需要较小的跨度来定位或设置内部较小的区域。之后就变得棘手了。
在标记的特定子集周围使用 span 标签没有任何问题（尽管我更喜欢 strong 或 em）...我说你可以废弃它们，因为它们包装了所有锚内容。跨度>

【解决方案2】：

你可以为 UL 使用clearfix 类（而不是清除跨度）：

.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 代码的更改 :)

【讨论】：

【解决方案3】：

CSS 菜单在 2005 年是个麻烦事。所有的跨浏览器兼容性、IE javascript 修复文件等等。专门回答您的问题：它们今天与三年前没有什么不同，因为 IE7 不支持 :hover 在非链接上，IE6 仍然需要支持。

这几天只需要下载 jQuery，安装 Superfish 插件并包含以下代码：

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

然后完成。甚至适用于 IE6（功能较少）。

【讨论】：

我认为你在这里大错特错。我喜欢 jQuery，但大多数菜单不需要 Superfish 给你的那种额外的花里胡哨。另外，跨浏览器 CSS 确实不像 IE5 时代那么难。甚至 Superfish 也使用 CSS 来实现与 IE6 的兼容性。
顺便说一句，因为我现在已经两次对这个答案投了反对票：superfish 实际上提供了禁用 Javascript 的工作 CSS 菜单（至少在 Firefox 中；没有菜单在没有 Javascript 的 IE 中工作，因为它没有'不支持：悬停在非链接上）。

【解决方案4】：

如果您对子菜单感兴趣，那么我建议您查看 YUI 库。它为您提供了一个跨浏览器兼容的标记子菜单。

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

【讨论】：