5

我正在尝试实现具有以下功能的菜单：

  • 水平的;
  • 等宽菜单项；
  • 菜单项分布在整个页面宽度上（不仅仅是左侧拥挤）；
  • 动态的（css 规则不应依赖于预定义的项目数量）；
  • 带有垂直对齐项目的下拉第二级；
  • 纯 CSS（没有 JS！）。

正如我所见，这似乎描述了一个完美的菜单。

我几乎成功地使用了漂亮的display: table-cell;技术（为简单起见省略了标签）：

<ul>
    <li>Menu item</li>
    <li>
        Expandable ↓
        <ul>
            <li>Menu</li>
            <li>Menu item</li>
            <li>Menu item long</li>
        </ul>
    </li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
    text-align: center;    
}

li:nth-child(even){
    background-color: lightblue;    
}

li:nth-child(odd){
    background-color: lightskyblue;    
}

li ul { display: none; }

li:hover ul {
    display: block;
    position: absolute;
}

li:hover ul li {
    display: block;
}

唯一的问题是子菜单项显示为整页宽度并部分显示在浏览器窗口之外，从而强制显示水平滚动条：

呸！StackOverflow 不允许我发布图片。在 JSFiddle 上进行现场测试：http: //jsfiddle.net/6PTpd/9/

float: left; clear: both;我可以通过添加来克服这个问题li:hover ul li。但是当我这样做时，子菜单项有不同的宽度：

小提琴：http: //jsfiddle.net/6PTpd/10/

...或宽度width: 15%;：http: //jsfiddle.net/6PTpd/12/

这两个修复都很丑陋，既不能解决等宽问题，也不能解决水平滚动条问题。

UPD在刷这篇文章时，我发现了滚动条问题的一些解决方案：将li:hover ul宽度设置为 0。但这会强制以绝对值指定子菜单项的宽度。:(见http://jsfiddle.net/6PTpd/13/

此外，当最后一个菜单项展开时，此解决方案可能会很糟糕。根据屏幕宽度，它可能仍然会使页面比窗口宽：http: //jsfiddle.net/6PTpd/15/

问题：

  1. 如何在不启用水平滚动条的情况下使子菜单项与其父项显示相同的宽度？
  2. 是否有另一种 CSS 技术允许创建具有文章开头所述的所有先决条件的菜单？

我找到了很多示例，但它们中的每一个要么是非拉伸的（将项目浮动到左侧）要么是非动态的（使用从预定义数量的项目中获取的大小，例如width: 20%对于五个一级项目中的每一个或，更糟糕的是，使用绝对大小！）。

4

2 回答 2

2

这不是最好的方法，但这是您的解决方案：http: //jsfiddle.net/6PTpd/17/

CSS 的有趣之处在于，即使是大师们也总是在寻找可以用它做的新东西。以这种方式，它是一种了不起的语言。这就是为什么我给你那个小提琴，这样你就可以知道你做错了什么（主要是绝对定位，顺便说一句）。但是也有一些你应该注意的漏洞。

因此，让我解释一下为什么您可能不应该使用该 JSFiddle 中的代码。第一个问题是它使用display: none. 这是一个问题，因为屏幕阅读器不会阅读未显示的文本。（更多关于这里：http ://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ ）

第二个问题是它在悬停时显示。在触摸屏变得越来越普遍的世界中，悬停不再是最佳选择。

如果你愿意，你仍然可以使用它，只是认为你应该知道它的缺点。

TL;DR：如果屏幕阅读器和触摸屏支持是一个问题，那么我鼓励您寻找其他选项。

于 2012-09-06T14:44:42.663 回答
0

有很多方法可以使用 HTML 和 CSS 编码来制作完美的菜单，特别是如果您使用的是 HTML5 和 CSS3，您可以通过搜索互联网找到很多示例。第二种简单的方法是使用诸如 Sothink DHTML Menu 或http://css3menu.com之类的程序，这些程序将使您的编码更容易

于 2012-09-06T23:52:28.930 回答