響應式導航菜單，項目「掖在」海誓山盟

Question

我希望有人能夠指出我在正確的方向與我希望實現的目標。我正在建立一個響應式網站，並有一個跨越頂部的傳統導航菜單，裏面有幾個項目。

當頁面變窄時，我需要此菜單縮小，而不是導航菜單打破我想要的項目不適合放在「更多...」下拉選項卡下。這有意義嗎？這裏有一個圖形表示...

那麼最上面的圖片是它可能是什麼樣子，1024寬度，而下方則是768的寬度。

菜單中的內容是不明所以的寬度會有所不同，所以我需要計算組合鏈接的寬度，然後什麼比這更會得到把更多..下拉列表下方。

任何提示將不勝感激，只是不知道在哪裏的那一刻開始。

謝謝

Answer 1

這裏是一個可以解決問題的一個很好的jQuery插件：https://github.com/352Media/flexMenu

此外，一定要檢查出一個偉大的文章提供有關如何使用上述flexMenu組織這種靈活的導航的一步一步的指示插件：http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/

Answer 2

我覺得我的變種可能是你的起點。我在jQuery的新手和我學習了很多自己 - 所以任何人，隨時糾正（提高），我的方法或我的邏輯:)

我的出發點是在這裏：http://jsfiddle.net/skip405/yN595/1/

要看到它在操作中，您需要調整結果窗口的大小，以便連續有3個或4個項目（不是7），然後再次按運行。將鼠標懸停在「更多」上可查看其餘的人。

在這撥弄我的計算列表項的寬度在一個循環中，它與整個菜單的寬度進行比較。當物品的計算寬度變得高於菜單的寬度時 - 我們可以獲得目前可見的li s的數量。

注意：此代碼適用於document.ready，並且不適用於調整窗口大小。因此，現在調整窗口大小時請按運行。

Answer 3

實現這個很簡單，如果菜單可以是靜態的，沒有進行調整時，在調整窗口大小;在這種情況下，@ skip405的例子是一個非常好的解決方案（+1）。

如果實現必須在窗口大小調整時動態調整菜單，但它會變得棘手......當用戶縮放瀏覽器窗口時，會觸發window.onresize事件，所以一個天真的實現（例如@skip405的方法在每個事件）會太慢/昂貴。

如下我想解決這個問題：

1. 計算並加上了開頭的所有鏈接的外部寬度。
2. 將所有可用鏈接附加到「更多」選項卡（克隆），以便動態顯示/隱藏它們。這比創建新的（對應的銷燬）DOM元素的速度要快得多。
3. 將處理程序綁定到onresize事件。在處理程序中，獲取當前菜單寬度並將其與鏈接的寬度進行比較。隱藏不適合菜單的所有鏈接，並在「更多」選項卡中顯示其對應部分。如果菜單足夠寬的話，顯示鏈接也是一樣。

這裏是我的實現：http://jsfiddle.net/vNqTF/

只是調整窗口的大小，看看會發生什麼。 ;）請注意，解決方案當然可以進行優化 - 這只是一個例子。