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 管理模板集合中挑选出来的,可以帮助你用 ...
随机推荐
- js 通过function来定义函数
什么是函数: 函数是完成某一功能的代码段. 函数是可重复执行的代码段. 函数方便管理和维护. 自定义一个函数: 通过function关键字来定义一个函数. 语法: function 函数名称([可 ...
- 配置并学习微信JS-SDK(1)
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 微信JS-SDK ...
- Android2.2 API —— ImageView
注意 请查看本文后期更新完整版: http://www.cnblogs.com/over140/archive/2011/06/08/2075054.html 来源: 农民伯伯: http://www ...
- 从一个模板函数聊聊模板函数里面如何获得T的名字
写了个小程序,遇到点问题.总结总结,学习学习 #include<vector> #include<iostream> #include<typeinfo> usin ...
- sizeof()用法
参考:sizeof_百度百科 sizeof()用法汇总(经典) 声明:本文是笔者抽出对自己有用的细节,对前两文的总结. 1.sizeof概念 sizeof是C语言中判断数据类型或者表达式长度符:不是一 ...
- [BZOJ - 2631] tree 【LCT】
题目链接:BZOJ - 2631 题目分析 LCT,像线段树区间乘,区间加那样打标记. 这道题我调了一下午. 提交之后TLE了,我一直以为是写错了导致了死循环. 于是一直在排查错误.直到.. 直到我看 ...
- 改善 ASP.NET MVC 代码库的 5 点建议
MVC,建议 刚刚检查完支持工单中的一些代码,笔者想针对 ASP.NET MVC 应用的改进写一些建议.这些内容仍在笔者脑海中,愿与各位一同分享.若你已使用 MVC 一段时间,那么以下内容可能并不新鲜 ...
- 如何利用服务器下发的Cookie实现基于此Cookie的会话保持
Cookie是一种在客户端保持HTTP状态信息的常用技术,基于Cookie的会话保持常常出现在很多AX的部署案例中,尤其是涉及电子交易的系统部署中.此类系统往往要求负载均衡设备按照服务器下发的Cook ...
- [LeetCode#163] Missing Ranges
Problem: Given a sorted integer array where the range of elements are [lower, upper] inclusive, retu ...
- 前端程序员:月薪 5K 到 5 万,我干了啥
高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从 0 到 100,前 ...