最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架。
花周末时间,写了一个非常简单后台的菜单。
首先,看一下菜单的结构:

预览地址 :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:;
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的后台二级垂直菜单的更多相关文章

  1. 基于bootstrap的后台二级垂直菜单[转]

    最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架.花周末时间,写了一个非常简单后台的菜单.本着开源的精神,现在把它分享出来(呵 ...

  2. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  3. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  4. Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  5. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  6. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  8. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  9. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

随机推荐

  1. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

  2. 一. 什么是ANR?为什么会有ANR发生?

    对于Android平台的工程师来说,ANR应该是每个人都会遇到的问题,因为导致它的原因有很多,例如在主线程进行耗时操作,调用大量cpu资源进行复杂的预算等,并且可能在大多数情况下,这类问题不会发生,只 ...

  3. js获取时间加多山天和时间戳转换成日期

    function huoqu(){    var data = $("#data").val();//获取的时间    var day = $('#day').val();//往后 ...

  4. 将VIM配置成强大的IDE(三)

    上一节,我们知道了,我们了解了怎么配置插件的下下载. 现在,我们就可以去DIY我们的IDE了,主要介绍taglist插件和NERDTree插件,最终的结果是: 1.安装Taglist插件. Tagli ...

  5. HDU 5726 GCD (2016 Multi-University Training Contest 1)

      Time Limit: 5000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Description Give y ...

  6. uoj164. 【清华集训2015】V 统计

    坑爹题面:http://uoj.ac/problem/164 正常题面: 对于一个序列支持下列5个操作: 1.区间加x 2.区间减x并与0取max 3.区间覆盖 4.单点查询 5.单点历史最大值查询 ...

  7. golang_protobuf环境搭建

    搭建golang使用rotobuf使用环境 一 安装protobuf: 1 下载protobuf源码:https://github.com/google/protobuf 2 进入源码目录: ./au ...

  8. 对比JQuery与JavaScript

    JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...

  9. bzoj 1079: [SCOI2008]着色方案 DP

    1079: [SCOI2008]着色方案 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 803  Solved: 512[Submit][Status ...

  10. Gogs:可能是比Gitlab更好的选择

    Gitlab是一个很棒的Git托管服务,几乎像GitHub一样强大. 但是,有没有能和Gitlab/Github媲美但操作更简单的项目呢?我认为 Gogs 是很好的选择. 简介 现在,GitHub已经 ...