Bootstrap-基于bootstrap的后台二级垂直菜单-白红宇

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

阅读量：6541 次

发布时间：2019-06-24

本文共 1582 字，大约阅读时间需要 5 分钟。

最近做一个后台的管理项目，用到了Twitter推出的bootstrap前端开发工具包，是一个基于css3/html5的框架。

花周末时间，写了一个非常简单后台的菜单。

首先，看一下菜单的结构：

预览地址：

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;}