Bootstrap-基于bootstrap的后台二级垂直菜单
最近做一个后台的管理项目,用到了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的后台二级垂直菜单的更多相关文章
- 基于bootstrap的后台二级垂直菜单[转]
最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架.花周末时间,写了一个非常简单后台的菜单.本着开源的精神,现在把它分享出来(呵 ...
- Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
- 基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
随机推荐
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- 一. 什么是ANR?为什么会有ANR发生?
对于Android平台的工程师来说,ANR应该是每个人都会遇到的问题,因为导致它的原因有很多,例如在主线程进行耗时操作,调用大量cpu资源进行复杂的预算等,并且可能在大多数情况下,这类问题不会发生,只 ...
- js获取时间加多山天和时间戳转换成日期
function huoqu(){ var data = $("#data").val();//获取的时间 var day = $('#day').val();//往后 ...
- 将VIM配置成强大的IDE(三)
上一节,我们知道了,我们了解了怎么配置插件的下下载. 现在,我们就可以去DIY我们的IDE了,主要介绍taglist插件和NERDTree插件,最终的结果是: 1.安装Taglist插件. Tagli ...
- HDU 5726 GCD (2016 Multi-University Training Contest 1)
Time Limit: 5000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Description Give y ...
- uoj164. 【清华集训2015】V 统计
坑爹题面:http://uoj.ac/problem/164 正常题面: 对于一个序列支持下列5个操作: 1.区间加x 2.区间减x并与0取max 3.区间覆盖 4.单点查询 5.单点历史最大值查询 ...
- golang_protobuf环境搭建
搭建golang使用rotobuf使用环境 一 安装protobuf: 1 下载protobuf源码:https://github.com/google/protobuf 2 进入源码目录: ./au ...
- 对比JQuery与JavaScript
JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...
- bzoj 1079: [SCOI2008]着色方案 DP
1079: [SCOI2008]着色方案 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 803 Solved: 512[Submit][Status ...
- Gogs:可能是比Gitlab更好的选择
Gitlab是一个很棒的Git托管服务,几乎像GitHub一样强大. 但是,有没有能和Gitlab/Github媲美但操作更简单的项目呢?我认为 Gogs 是很好的选择. 简介 现在,GitHub已经 ...