我有一个看起来像这样的菜单:

|Home|Options|Settings|Tools|Preferences|Edit|

当手机有很多水平空间时这很好，但是当具有窄视口(viewport)的设备访问页面时，我希望菜单看起来像

|Home|Options|Settings|+MORE+|

点击“更多”菜单会在垂直下拉菜单中显示其他元素。

我不想设置手动断点，因为我不知道各个菜单项在显示时会有多宽。

我的菜单目前只有一组<li>在<ul>

水平布局的CSS是

#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu  a { display: block; padding: 0.5em; text-decoration: none; border-right: 1px solid #fff; font-size: 110%; }

我不愿意使用 jQuery 之类的东西——即使最小化，它对于旧的移动浏览器来说仍然是一个很大的开销。媒体查询对于某些手机来说也是有问题的，所以我想避免依赖这些。

关于根据浏览器宽度自动隐藏元素的 CSS 和(简单)JavaScript 有什么想法吗？

最佳答案

实际上，您完全可以不使用 JavaScript 来完成，只需使用 media queries (这真的是 have excellent support + 我展示的这个解决方案是移动优先的解决方案)和 :nth-last-child (这又是偶数 supported by Opera Mini )。

demo

(调整大小以查看其工作原理)

你需要有这样的结构:

<nav id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Options</a></li>
        <li><a href='#'>Settings</a></li>
        <li><a href='#'>Tools</a></li>
        <li><a href='#'>Preferences</a></li>
        <li><a href='#'>Edit</a></li>
        <li><a href='#'>+ MORE +</a></li>
    </ul>
</nav>

然后您需要选择工具、首选项和编辑并将它们的显示设置为无:

#menu li:nth-last-child(-n+4):not(:last-child) { display: none; }

li:nth-last-child(-n+4) 只选择末尾的前四个列表项。您向其中添加 :not(:last-child) 条件是因为您希望显示 + MORE + 列表项。

为了更好地理解结构伪类，您可以尝试使用 this tool .

最后，您需要使用媒体查询来更改大屏幕的显示设置:

@media (min-width: 30em) {
    #menu li:nth-last-child(-n+4):not(:last-child) { display: block; }
    #menu li:last-child { display: none; }
}

我使用的是基于 em 的媒体查询，而不是基于 px 的媒体查询，原因有二:

• 一个，this article ;
• 第二，我自己的网站在缩放时看起来很糟糕，因为一年前我在上面使用了基于 px 的媒体查询；

编辑:为了使菜单在点击时展开并使显示的菜单元素数量随屏幕宽度而变化，我对结构做了更多更改:

<nav id='menu'>
    <a tabindex=1 class='ctrl' href='#'>+ MORE +</a>
    <ul>
        <li><a href='#' class='menu-link'>Home</a></li>
        <li><a href='#' class='menu-link'>Options</a></li>
        <li><a href='#' class='menu-link'>Settings</a></li>
        <li><a href='#' class='menu-link'>Tools</a></li>
        <li><a href='#' class='menu-link'>Preferences</a></li>
        <li><a href='#' class='menu-link'>Edit</a></li>
    </ul>
</nav>

还稍微更改了 CSS:

#menu .ctrl { float: right; }
#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu li:nth-last-child(-n+5) { display: none; }
#menu a {
    padding: 0.5em;
    text-decoration: none;
    border-right: 1px solid #fff;
    font-size: 110%;
}
#menu li a { display: block; }
#menu li:first-child a { border-left: 1px solid #fff; }
#menu .ctrl:focus, #menu .ctrl:active { display: none; outline: 0; }
#menu .ctrl:focus ~ ul li, #menu .ctrl:active ~ ul li { display: block; }

@media (min-width: 15em) {
    #menu li:nth-child(2) { display: block; }
}
@media (min-width: 20em) {
    #menu li:nth-child(3) { display: block; }
}
@media (min-width: 25em) {
    #menu li:nth-child(4) { display: block; }
}
@media (min-width: 30em) {
    #menu .ctrl ~ ul li { display: block; }
    #menu .ctrl { display: none; }
}

demo

(我还在每 5em 处添加了一个带有垂直线的背景，以便在调整浏览器窗口大小时清楚显示屏幕的宽度)

此方法无需 JavaScript 即可运行 - 在桌面浏览器、Opera Mobile、Android 浏览器和 iOS Safari 中进行了测试。不过，我不知道 Opera Mini - 我必须测试一下。

EDIT#2:不，它在 Opera Mini 中对我不起作用(菜单已折叠，但单击 + MORE + 链接不会展开它).试图让它与 JavaScript 一起工作(没有库)，但这在 Opera Mini 中也不起作用(尽管它可以在桌面浏览器上工作)。

EDIT#3:还尝试使用 jQuery 做同样的事情。这次它也适用于 Opera Mini。真的很慢(至少对我而言)，但它确实有效。这是我使用的:

$('.ctrl').click(function() {
    $(this).css({'display': 'none'}).next().children().css({'display': 'block'});
});

EDIT#4:现在尝试了 :target 方法 - demo (也仅限 CSS)。使用 Chrome 在我的笔记本电脑上运行良好(尚未在其他桌面浏览器中测试)，在 Opera Mini 中不起作用(菜单已折叠，单击 + MORE + 链接不会展开)。不过可以在 Opera Mobile 中使用。

关于javascript - 折叠响应设计的水平菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12480240/