基於bootstrap的後臺二級垂直菜單[轉]

最近作一個後臺的管理項目，用到了Twitter推出的bootstrap前端開發工具包，是一個基於css3/html5的框架。
花週末時間，寫了一個很是簡單後臺的菜單。本着開源的精神，如今把它分享出來（呵呵，前端的老鳥就不要看啦！）。
首先，看一下菜單的結構：

預覽地址 ：http://www.huosen.net/demo/bootstrap-menu/index.html
css的代碼爲：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

/*左側菜單*/ .sidebar-menu{      border-right : 1px solid #c4c8cb ; } /*一級菜單*/ .menu-first{      height : 45px ;      line-height : 45px ;      background-color : #e9e9e9 ;      border-top : 1px solid #efefef ;      border-bottom : 1px solid #e1e1e1 ;      padding : 0 ;      font-size : 14px ;      font-weight : normal ;      text-align : center ; } /*一級菜單鼠標劃過狀態*/ .menu-first:hover{      text-decoration : none ;      background-color : #d6d4d5 ;      border-top : 1px solid #b7b7b7 ;      border-bottom : 1px solid #acacac ; } /*二級菜單*/ .menu-second li a{      background-color : #f6f6f6 ;      height : 31px ;      line-height : 31px ;      border-top : 1px solid #efefef ;      border-bottom : 1px solid #efefef ;      font-size : 12px ;      text-align : center ; } /*二級菜單鼠標劃過樣式*/ .menu-second li a:hover {      text-decoration : none ;      background-color : #66c3ec ;      border-top : 1px solid #83ceed ;      border-bottom : 1px solid #83ceed ;      border-right : 3px solid #f8881c ;      border-left : 3px solid #66c3ec ; } /*二級菜單選中狀態*/ .menu-second-selected {      background-color : #66c3ec ;      height : 31px ;      line-height : 31px ;      border-top : 1px solid #83ceed ;      border-bottom : 1px solid #83ceed ;      border-right : 3px solid #f8881c ;      border-left : 3px solid #66c3ec ;      text-align : center ; } /*覆蓋bootstrap的樣式*/ .nav-list,.nav-list li a{      padding : 0px ;      margin : 0px ; }

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< div class = "sidebar-menu" >      < a href = "#userMeun" class = "nav-header menu-first collapsed" data-toggle = "collapse" >< i class = "icon-user-md icon-large" ></ i > 用戶管理</ a >      < ul id = "userMeun" class = "nav nav-list collapse menu-second" >          < li >< a href = "#" >< i class = "icon-user" ></ i > 增長用戶</ a ></ li >          < li >< a href = "#" >< i class = "icon-edit" ></ i > 修改用戶</ a ></ li >          < li >< a href = "#" >< i class = "icon-trash" ></ i > 刪除用戶</ a ></ li >          < li >< a href = "#" >< i class = "icon-list" ></ i > 用戶列表</ a ></ li >        </ ul >      < a href = "#articleMenu" class = "nav-header menu-first collapsed" data-toggle = "collapse" >< i class = "icon-book icon-large" ></ i > 文章管理</ a >      < ul id = "articleMenu" class = "nav nav-list collapse menu-second" >          < li >< a href = "#" >< i class = "icon-pencil" ></ i > 添加文章</ a ></ li >          < li >< a href = "#" >< i class = "icon-list-alt" ></ i > 文章列表</ a ></ li >      </ ul > </ div >

源碼下載地址爲：http://download.csdn.net/detail/huozhicheng/5127768