文档章节

基于bootstrap的后台二级垂直菜单

孟飞阳
 孟飞阳
发布于 2016/06/13 09:42
字数 504
阅读 601
收藏 2

最近做一个后台的管理项目,用到了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: 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>

 

本文转载自:http://www.huosen.net/archives/176.html

孟飞阳
粉丝 217
博文 1057
码字总数 566384
作品 5
朝阳
个人站长
私信 提问
基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式

在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容。基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内容,因此菜...

walb呀
2017/12/04
0
0
10大经典CSS3菜单应用欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 1、CSS...

boy22funny
2015/03/12
14
0
Guns V2.2更新,做简洁的管理系统

V2.2更新日志 菜单树由最多二级菜单拓展为三级菜单 用户管理页面新增部门树,方便查询部门人员信息 完善系统的session机制,增加session失效时间的跳转 完善Guns代码生成功能,新增Dao和Servi...

stylefeng
2017/06/19
3.8K
8
PHP开源管理后台--OSAdmin

OSAdmin - PHP开源管理后台 一套具备基础功能的管理后台,在这基础之上进行后台开发,简洁高效,事半功倍! 程序架构很简单,Html5+Smarty+Medoo+Bootstrap+bootbox。 osadmin,一个用PHP开发...

somewhereyu
2013/05/30
60.7K
33
Bootstrap的二级垂直菜单

CSS /左侧菜单/.sidebar-menu{ border-right: 1px solid #c4c8cb;}/一级菜单/.menu-first{ height:45px; line-height:45px; background-color: #e9e9e9; border-top: 1px solid #efefef; bo......

enjoymore
2015/09/11
5.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
25分钟前
3
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
27分钟前
3
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
29分钟前
3
0
grid 布局 设置行列间距

本文转载于:专业的前端网站➪grid 布局 设置行列间距 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt......

前端老手
41分钟前
3
0
spring-data-elasticsearch 和 Jackson 配合使用的bug

下面先简单描述项目。 项目依赖: dependencies { implementation group: 'org.springframework.boot', name: 'spring-boot-starter-data-elasticsearch', version: '2.1.0.RELEASE'......

Landas
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部