2013-03-14 23 views
4

我有一個應用程序,我正在爲客戶創建一些點,有6個級別的導航。基本上我們的用戶想要從導航中選擇一個項目。這將導致另一組導航,這將導致另一組導航等等,直到你在導航屬性上達到6級。如何處理深層嵌套導航菜單?

一些菜單項並不那麼實際上沒有子菜單。

爲了使事情更加複雜,一些鏈接需要描述鏈接導致的報告。這裏需要注意的是,其中的一些描述是15行,基本上是大段文字。

我已經嘗試了懸停打開子菜單,但當你到第六級,如果你移動你的鼠標頭髮太多,你回來,並再次樹出來。

我試着從twitter引導手風琴的方法,但沒有奏效,因爲在6級菜單的大部分導航被推下了頁面。

我嘗試使用XML填充下拉列表,其中基本上用戶會點擊一個鏈接,「子鏈接」將出現在部分視圖中並帶有下拉列表。直到你處於最低水平。問題是我的屏幕房地產用完了6個下拉列表和一個描述。

任何人有任何建議,我可以用這樣的應用程序做什麼?

+0

哇...我真的會退後一步,地址什麼的主要目標,做一個完整的應用總結和發展。 6級導航只會傷害你的利潤,我無法想象你給最終用戶帶來的壓力。你在做什麼需要這麼多? – 2013-03-14 18:29:50

+0

我其實不是那個暗示這一點的人。我們的最終用戶希望以這種方式佈置網站。如果它取決於我,我會有一個像搜索框一樣的谷歌,用戶可以搜索他們正在尋找的任何報告 – Robert 2013-03-14 18:32:36

+0

這可能更適合http://ux.stackexchange。com/ – MrWhite 2013-03-15 10:01:33

回答

9

向下鑽取菜單 - iPod的風格

一個簡單的解決方案是從來沒有一次使用CSS樣式來顯示一個或多個嵌套的,有很多菜單,你可以做到這一點,只是一些例子我之前在我的設計中使用過涉及大量嵌套菜單的菜單是使用iPod風格的菜單。以look for yourself爲例,顯示儘可能多的巢穴,同時保持一切易於使用,看起來也很酷。

你可以在這裏查看源代碼和其他演示:jQuery iPod style and flyout menus,如果你使用WordPress,那麼這個已經被移植了here。另外值得注意的是,當你看到demo時,你可以在頁面上看到很多菜單,但是你可以看到一個下拉菜單很有效,但是你可以有很多菜單在一個'菜單欄'旁邊,非常合適這個情況。下拉菜單鑽

更多示例

+0

這將對我所做的很好,謝謝 – Robert 2013-03-14 18:36:21

+0

沒問題,只需添加幾個鏈接即可考慮,享受。 – 2013-03-14 18:43:03

+0

將下鑽菜單添加到網頁有什麼好的步驟。我看到很好的例子,但沒有真正的HTML,除非我檢查元素 – Robert 2013-03-14 20:00:15