目前的應用設計風格趨於Flat扁平化,許多基於BootStrap實現了許多UI非常漂亮的管理介面(Bootstrap admin template)。首先看一下主介面:
查看左邊導航的選單html結構:
透過觀察,可以發現其中選單樹的特點,這裡注意一下,選單頂部的標題顯示在span中,另外class也不同。那邊要如何從資料庫動態產生符合此特徵的treemenu結構呢?
1 資料庫欄位設計
2 示範資料
5 選單類別實作:
rr
7 測試驗證生成的選單結構是否正確,首先看看顯示的層級結構和資料庫是否一致,另外查看點擊上級,是否可以展開,最後注意的是,在左邊選單收縮後,只顯示圖標,滑鼠移到圖示上後,並能正確顯示子選單:
聲明:本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給予原文連接,否則保留追究法律責任的權利。