Bootstrap-基于bootstrap的后台二级垂直菜单
2014-10-24 16:12
357 查看
最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架。
花周末时间,写了一个非常简单后台的菜单。
首先,看一下菜单的结构:
预览地址 :http://www.huosen.net/demo/bootstrap-menu/index.html
css的代码为:
花周末时间,写了一个非常简单后台的菜单。
首先,看一下菜单的结构:
预览地址 :http://www.huosen.net/demo/bootstrap-menu/index.html
css的代码为:
/*左侧菜单*/ .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; }
<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>
相关文章推荐
- 基于bootstrap的后台二级垂直菜单
- 基于bootstrap的后台二级垂直菜单
- 基于bootstrap的后台二级垂直菜单[转]
- bootstrap的后台二级垂直菜单
- 兼容IE6,IE7,IE8,FF的JQuery 垂直二级导航菜单
- 垂直二级导航菜单用div+CSS架构实例
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
- 一款基于jquery和css3的响应式二级导航菜单
- jQury实现垂直与横 向二级菜单
- 基于 Bootstrap 的响应式后台管理面板
- 后台管理-基于 Bootstrap 开发的网站后台管理面板
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
- 基于jquery的二级联动菜单实现代码
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
- Jq-三级菜单(一二级为水平,三级为垂直)
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
- 基于Bootstrap的网站后台模板Metronic
- 一款基于jquery和css3的响应式二级导航菜单