基于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