折叠响应设计的水平菜单

Question

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

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

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

|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的想法,根据浏览器的宽度自动隐藏元素？

Answer 1

实际上,你可以完全没有JavaScript,只需要媒体查询(这真的有很好的支持 +我提出的这个解决方案是移动优先)和:nth-last-child(甚至Opera Mini支持).

演示

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

你需要有这样的结构:

<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>

然后,您需要选择工具,首选项和编辑,并将其设置display为none:

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

li:nth-last-child(-n+4)从末尾仅选择前四个列表项.您可以添加:not(:last-child)条件,因为您希望显示+ MORE +列表项.

为了更好地理解结构伪类,您可以使用此工具.

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

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

我使用的是em基于媒体的查询,而不是px基于它的原因有两个原因:

• 一,这篇文章 ;
• 二,我自己的网站看起来像废话缩放,因为我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; }
}

演示

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

此方法应该在没有JavaScript的情况下工作 - 在桌面浏览器,Opera Mobile,Android浏览器和iOS Safari中进行测试.我不知道Opera Mini - 我必须测试一下.

编辑#2:不,它在Opera Mini中不起作用(菜单已折叠,但点击+ MORE +链接不会展开它).试图使它与JavaScript(没有库)一起工作,但这在Opera Mini中也不起作用(尽管它适用于桌面浏览器).

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

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

编辑#4:现在尝试了:target方法 - 演示(也是仅限CSS).使用Chrome在我的笔记本电脑上正常工作(未在其他桌面浏览器中测试过),在Opera Mini中无法正常工作(菜单已折叠,单击+ MORE +链接不会展开它).但在Opera Mobile中可以使用.