折叠水平菜单响应设计

Question

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

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

这时候，一个电话有很多的横向空间，但是当有一个狭窄的视口的设备访问网页，我想要菜单看起来像

|Home|Options|Settings|+MORE+| 

在哪里点击“更多”菜单显示垂直下拉的其他项目。

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

我的菜单目前只是在<ul>

的CSS的横向布局一套<li>是

#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的做这件事的所有，只是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> 

然后，你需要选择工具 ，首选项和编辑并将它们的display设置为none：

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

li:nth-last-child(-n+4)从最后只选择前四个列表项。您将:not(:last-child)条件添加到该条件，因为您希望显示+更多+列表项目。

为了更好地理解结构伪类，你可以玩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：

• one，this article;
• 二，我自己的网站看起来像放大缩小，因为我在一年前使用基于px的媒体查询;

---

EDIT：为了使在菜单上点击扩大和使显示菜单元素的数量与屏幕宽度而变化，我已经改变了结构多一点：

<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，但我必须测试它。

编辑＃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方法 - demo（也CSS-只）。在使用Chrome的笔记本电脑上正常工作（未在另一台桌面浏览器中测试过），在Opera Mini中不起作用（菜单被折叠，单击+更多+链接不会扩展它）。尽管在Opera Mobile中有效。