Question

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

作为一个古老的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>。每个人似乎都有自己的菜单标记方式，只是有点不同。

无论如何，在修改了 lot 菜单后，上面就是我想出来的，但我想弄清楚是否有一个实际建立的最佳实践。我想在某些时候建立一个简单的CSS菜单代工厂，在继续前往标记之前获得一些输入会很好。

编辑：关于Javascript菜单的问题是不。我知道那里有优秀的脚本菜单，并且它们允许您拥有子菜单，更高级的动画和悬停时间，快捷键，阴影和其他所有内容。但是90％的菜单不需要这些功能，并且使用CSS进行样式设置和悬停效果要好得多。

Answer 1

除了剥离span标签外，我认为还不错。

没有理由将它们与您的设置相提并论，您可以根据需要设置文本样式

li a {/*styles*/}

您还应该能够删除

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

部分也是如此。如果你试图只漂浮div中的ul，你可能会废弃div。如果由于某些其他原因需要清除，则可以执行

<br clear="all"/>

Answer 2

您可以将clearfix类用于UL（清除范围的内容）：

.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代码：）

Answer 3

CSS菜单是后方的痛苦，所以2005年。所有跨浏览器兼容性，IE浏览器javascript修复文件等。特别回答你的问题：今天它们与三年前没有什么不同，因为IE7不支持：悬停在非链接上，IE6仍然需要支持。

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

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

并完成了。甚至适用于IE6（功能较少）。

Answer 4

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

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

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

4 个答案: