5

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

作为一个老式的 HTML 纯粹主义者，我喜欢 styled <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>，一些使用不同的词 than current，一些将current类附加到<a>标签而不是<li>，还有一些省略了内部<span>。每个人似乎都有自己的方式来做菜单标记，只是有点不同。

无论如何，在修改了很多菜单之后，以上是我想出的，但我试图弄清楚是否有一个实际建立的最佳实践。我想在某个时候建立一个简单的 CSS 菜单铸造厂，在继续之前获得一些关于标记的输入会很好。

编辑：问题不在于 Javascript 菜单。我知道那里有出色的脚本菜单，它们允许您拥有子菜单、更高级的动画和悬停时间、快捷键、阴影和其他一切。但是 90% 的菜单不需要这些功能，使用 CSS 来设置样式和悬停效果会更好。

4

4 回答 4

4

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

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

li a {/*styles*/}

您还应该能够删除

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

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

<br clear="all"/>
于 2009-01-28T04:45:09.157 回答
2

您可以使用clearfixUL 类（而不是清算跨度）：

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

于 2009-01-28T20:20:36.863 回答
1

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

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

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

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

于 2009-01-28T05:03:58.930 回答
1

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

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

于 2009-01-28T09:57:19.243 回答