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

Question

所以,我一直在"收集"CSS菜单一段时间(另一个术语是"借用",另一个术语是'公然扯掉'),向他们学习,并可能重用我自己的一些leetness项目.

作为一个古老的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进行样式设置和悬停效果要好得多.

Answer 1

除了去掉跨度标签之外，我认为还可以。

没有理由拥有它们，因为通过您的设置，您可以根据需要设置文本样式

li a {/*styles*/}

您还应该能够删除

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

部分也是如此。如果您试图仅将 ul 浮动在 div 内部，您不妨废弃该 div。如果您出于其他原因需要清除，您可以执行以下操作

<br clear="all"/>