如何創建一個大的導航菜單

目前，它的代碼看起來沿着這些路線

<div id="Layer_01_Category_01_Header" class="Some classes here"> 
</div> 
<div id="Layer_01_Category_01_Content" class="Some classes here"> 
    <div id="Layer_02_Category_01_Header" class="Some classes here"> 
    </div> 
    <div id="Layer_02_Category_01_Content" class="Some classes here"> 
     <div id="Layer_03_Category_01_Header" class="Some classes here"> 
     </div> 
     <div id="Layer_03_Category_01_Content" class="Some classes here"> 
      ITEMS HERE 
     </div> 
     <div id="Layer_03_Category_02_Header" class="Some classes here"> 
     </div> 
     <div id="Layer_03_Category_02_Content" class="Some classes here"> 
      ITEMS HERE 
     </div> 
    </div> 
</div>

這是怎麼看起來是：https://gyazo.com/74e407b749e3a05574703e5c3b2256b3

這是怎麼應該工作：

1）用戶點擊開的基團（與白色三角箱的左側）
2）屬於該組的項目（淺灰色背景）被加載，並且用戶可以點擊其中一個項目以查看關於它的更多信息（顯示在另一個div上的信息，在菜單之外）
3）用戶打開另一個組。先前打開的組會被關閉，內容會被隱藏/刪除

我希望您明白...（我不善於解釋事物）。

現在...我曾嘗試手動這樣做，增加了對每個項目一個div，但它並不覺得這樣做的正確方法，因爲：

A）的HTML代碼已經是各地400線
B）的加載時間爲頁面會越來越長我不斷擴大這個菜單（我假設？）更

我怎麼能去與項目填充組在有些自動化的方式？我想到的是在打開一個組時使用腳本來運行腳本，該腳本使用來自數據庫/ xml文件的項目填充該腳本，但我希望聽到其他解決方案。

來源

2015-12-06 Stenwalden

我承擔以下事情。

層次的深度可以是任何級別。
每個關卡的長度可以是任何東西。

我建議從手風琴更改菜單層疊樣式。

如果層次結構的深度更大，當列深度移位更多時，可能最終會出現帶有省略號的一半顯示名稱。請參閱以下
如果在單一層次的項目的數量越多，你可能最終向上，垂直滾動條。用戶體驗再次與觀看體驗不一致。這將是更好的，你可以在這種情況下使用cascading menu style。請看下面的圖片。然而，對於這樣的菜單樣式靜態或動態加載會工作。雖然，我會推薦靜態菜單加載和使用CSS來處理懸停和顯示&隱藏。

注意：由於組合方法（手風琴+樹）不適合多級和多菜單項，所以我只是推薦了正確的方法。我相信，它只需要在css屬性（如position，z-index，display或visible）中進行少量研究。我把這些東西留給你了。

來源

2015-12-06 20:23:07

如何創建一個大的導航菜單

回答

相關問題