一个炫酷的Bootstrap导航菜单

一个炫酷的Bootstrap导航菜单

本文实例为大家分享了Bootstrap导航菜单的具体代码，供大家参考，具体内容如下

效果图：

点击菜单的箭头有点小问题，后面改，不是很影响。

Dashboard

Elements

Basic Elements

Icons

Font Awesome

Glyph Icons

Tabs & Accordions

Alerts & Tooltips

Modals & Wells

More Pages

Error 404

Grid

Multi Level Menu

Level 3

Level 4

Some Item

Another Item

CSS代码：

.page-sidebar{

position: absolute;

top: 0;

bottom: 0;

width: 224px;

display: block;

}

.page-sidebar .sidebar-menu {

margin: 0;

padding: 0;

margin-left: 5px;

}

.page-sidebar:before{

content: "";

position: fixed;

display: block;

width: 219px;

bottom: 0;

top: 0;

left: 5px;

background-color: #fff;

-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

z-index: 1;

}

.page-sidebar .sidebar-menu a{

color: #737373;

z-index: 123;

padding: 0 16px 0 7px;

margin: 0;

height: 38px;

line-height: 36px;

-webkit-text-shadow: mJIwBfvyNPnone!important;

text-shadow: none!important;

font-size: 13px;

}

.page-sidebar .submenu{

margin: 0;

padding: 0;

position: relative;

float: none;

background-color: #fbfbfb;

border: 0;

box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15);

border-radius: 0;

z-index: 123;

}

.page-sidebar .sidebar-menu>li>a {

border-top: 1px solid #f3f3f3;

}

/* 菜单前面的小图标*/

.page-sidebar .sidebar-menu a .menu-icon {

display: inline-block;

vertical-align: middle;

min-width: 30px;

text-align: center;

font-size: 14px;

font-weight: normal;

font-style: normal;

margin-top: -3px;

}

/* 向右的箭头*/

.page-sidebar .sidebar-menu a .menu-expand{

display: inline-block;

position: absolute;

font-size: 10px;

line-height: 10px;

height: 10px;

width: 10px;

right: 12px;

top: 15px;

margin: 0;

text-align: center;

padding: 0;

-webkit-text-shadow: none;

text-shadow: none;

color: #666;

-webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

-o-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

font-style: normal;

font-weight: normal;

}

.panel-group .panel{

margin: 0;

margin-top:0 !important;

border: none;

}

/* 第一层级缩进 */

.page-sidebar .sidebar-menu .submenu>li>a {

padding-left: 40px;

}

/* 第二层级缩进 */

.page-sidebar .sidebar-menu .submenu>li .submenu>li>a {

padding-left: 50px;

}

.page-sidebar .sidebar-menu a:hover {

color: #262626;

}

/* 选中增加蓝色border */

.page-sidebar .sidebar-menu .active:before {

display: block;

content: "";

position: absolute;

top: 0;

bottom: 0;

left: -4px;

width: 4px;

max-width: 4px;

overflow: hidden;

background-color: #2dc3e8;

}

.page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before {

display: block;

content: "";

position: absolute;

top: 0;

bottom: 0;

left: -4px;

width: 4px;

max-width: 4px;

overflow: hidden;

background-color: #fb6e52;

}

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。