當前的應(yīng)用設(shè)計風(fēng)格趨于Flat扁平化，很多基于BootStrap實現(xiàn)了很多UI非常漂亮的管理界面(Bootstrap admin template)。首先看一下主界面：
查看左邊導(dǎo)航的菜單html結(jié)構(gòu)(下面代碼有錯誤，HTML自定義屬性直接用空格進行分割，而不是,號進行分割，不然jquery獲取定義屬性時可能會出現(xiàn)錯誤）：
通過觀察，可以發(fā)現(xiàn)其中菜單樹的特點，這里注意一下，菜單頂級的標題顯示在span中，另外class也不同。那邊如何從數(shù)據(jù)庫動態(tài)生成符合此特征的treemenu結(jié)構(gòu)呢？
1 數(shù)據(jù)庫字段設(shè)計
2 演示數(shù)據(jù)
5 菜單類實現(xiàn)：
首先樹結(jié)構(gòu)的菜單，自然想到用遞歸來構(gòu)建（去掉html自定義屬性的分割,號，用空格代替），代碼如下：
View Code
6 調(diào)用
7 測試
驗證生成的菜單結(jié)構(gòu)是否正確，首先看看顯示的層級結(jié)構(gòu)和數(shù)據(jù)庫是否一致，另外查看單擊上級，是否可以展開，最后注意的是，在左邊菜單收縮后，只顯示圖標，鼠標移動到圖標上后，并能正確顯示子菜單：
8 應(yīng)用
假設(shè)菜單是這樣的：
用jquery可以在單擊菜單某項時，打開頁面
