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

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

bootstrap 三级导航相关推荐

Bootstrap~多级导航（级联导航）的实现
在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下插件地址:http://vsn4ik ...
java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
Bootstrap 分页导航中的翻页组件
分页导航中的翻页一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页导航. Bootstrap中,只需为列表 ...
Bootstrap 分页导航的对齐方式
分页导航的对齐方式分页导航中,默认采用左对齐.如果希望页码居中对齐,就给 .pagination 的 <div> 追加 .pagination-centered 类,希望页码右对齐,就给 ...
Bootstrap 标签导航的布局
默认情况下,标签的位于顶部.为了灵活控制标签的位置,Bootstrap额外提供了 3 个类,分别是 .tabs-left..tabs-right..tabs-below,它们分别让标签位于左侧.右侧. ...
Bootstrap 禁用导航链接
在导航组件中,包括标签导航.胶囊式导航.导航列表,为某个 <li> 元素添加 .disabled 类,可以让链接变灰并失去鼠标悬停效果.如: <ul class="nav ...
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏
<!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐 ...
Bootstrap后台导航
Bootstrap后台导航 1.新建一个web项目admin,首先要把bootstrap这些库给导进来. 2.打开bootstrap中文网站,找到文档.点击起步里面有一个模版,把这个模版直接复制到我们 ...
【解决方法】点击bootstrap里导航条nav里的下拉菜单无反应)
[解决方法]点击bootstrap里导航条nav里的下拉菜单无反应 nav 导航条下拉菜单 nav 导航条下拉菜单只需要按顺序引入以下3个文件即可:
bootstrap的导航栏在页面刷新后显示选中
这个问题今天花了两个小时第一次解决一点也不难很简单要领就是要注意观察bootstrap的导航栏在点击时一级以及二级菜单栏标签class以及属性的变化再根据判断当前的url和哪个标签的ur ...

bootstrap 三级导航

bootstrap 三级导航相关推荐

最新文章

热门文章