一个炫酷的Bootstrap导航菜单

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

效果图：

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

rush:xhtml;"> <Meta name="viewport" content="width=device-width,initial-scale=1"/>

CSS代码：

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个精彩的专题：

插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。