摺疊水平菜單響應設計

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中有效。