bootstrap 三级导航

三级导航的实现方式有很多，javascript+css就能实现，很多人也写过相应的插件来专门实现这个效果，对于bootstrap来说，三级导航实现起来就很容易了，用bootstrap实现三级导航的另外一个优点是你可以简单修改样式自定义效果，如何做到呢？

首先看一个简单的三级导航

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<nav role="navigation" class="miscro-font">
<ul class="nav navbar-nav navbar-left" id="top-nav-menu">
<li ><span id="index_menu_selected"></span><a href="#" class="click_selected">无子层导航</a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">第一级导航 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a href="#">第二级导航</a>
<ul class="dropdown-menu third-menu">
<li><a href="#">第三级导航</a></li>
</ul>
</li>
<li class="dropdown-submenu"> <a href="#">第二级导航</a>
<ul class="dropdown-menu third-menu">
<li><a href="#">第三级导航</a></li>
</ul>
</li>
</ul>
</nav>
</nav>

通过css可以设置子层导航的样式，使之在其父导航左右，

.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}

这样设置出的导航会使得鼠标悬浮在第三层时，对应的第二层父亲导航有不可自定义的悬浮效果，可以使用jQuery设置

$("#top-nav-menu li").bind({
mouseover:function(){
$(this).addClass('open');
},
mouseout:function(){
$(this).removeClass('open');
}
});

$('ul.third-menu>li>a').hover(function() {//悬浮在三级目录控制二级目录颜色
$(this).parent('li').parent('ul').prev('a').css({'background-color':'rgb(50,118,163)'});
$(this).parent('li').parent('ul').prev('a').css({'color':'#fff'});
}, function() {
if(!$(this).parent('li').hasClass('open')){
$(this).parent('li').parent('ul').prev('a').css({'background-color':'#fff','color':'black'});
}else{
$(this).parent('li').parent('ul').prev('a').css({'background-color':'rgb(50,118,163)','color':'#fff'});
}

});

$('li.dropdown-submenu').hover(function() {//二级目录悬浮与否控制颜色
$(this).children('a').css({'background-color':'#3276b1','color':'#fff'});
}, function() {
$(this).children('a').css({'background-color':'#fff','color':'black'});
});

当然背景色可以根据需要自行设置。