Question

所以，我已经收集了一段时间的CSS菜单（另一个术语可能是借用，另一个可能是明目张胆地剽窃），以从中学习，并在自己的项目中潜在地重用其中的某些精髓。

作为一位老派的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 />

如需单独漂浮 div 中的 ul，您可以舍弃 div。如果您需要为其他原因清除，您可以进行操作。

<br clear="all"/>

Answer 2

你可以使用 clearfix 类来清除 UL（而不是清除 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代码 :)

Answer 3

CSS菜单很烦人，而且已经是2005年的事了。所有的跨浏览器兼容性，IE javascript修复文件等等。具体来回答你的问题：它们与三年前没有什么不同，因为IE7不支持在非链接上的:hover并且还需要支持IE6。

这些天只需下载jQuery，安装Superfish插件并包含此代码：

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

完成了。甚至在IE6上也可以使用（带着更少的功能）。

Answer 4

如果您想要子菜单，我建议您查看YUI库。它为您提供了一个跨浏览器兼容的子菜单。

将此网址翻译成中文：http://developer.yahoo.com/yui/examples/menu/index.html http://developer.yahoo.com/yui/examples/menu/index.html

友情链接