一个炫酷的Bootstrap导航菜单

前端之家收集整理的这篇文章主要介绍了一个炫酷的Bootstrap导航菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果图:

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

<Meta name="viewport" content="width=device-width,initial-scale=1"/> beyond网站模板练习

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

插件使用教程

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

猜你在找的Bootstrap相关文章