bootstrap 三级导航

原创 2015年11月18日 19:01:08

三级导航的实现方式有很多,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侧边导航栏的实现

1. 侧滑栏使用定位fixed 2. 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑栏的侧滑...
  • kebi007
  • kebi007
  • 2017年07月25日 11:40
  • 9799

bootstrap导航条的二级菜单下实现三级菜单

bootstrap在导航条中的二级菜单下实现三级菜单直接上代码 ...

Bootstrap3多级导航菜单 三级菜单

Bootstrap3多级导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web...

针对bootstrap没有多级导航栏的解决办法

在bootstrap3的官方说明文档中,对于导航栏的下拉菜单选项,只介绍了二级下拉导航,这种局限性怎么可以忍, 如果不想要第三方工具解决问题,可以通过单击事件对导航选项的标签属性进行频繁修改,再引入第...

bootstrap导航条--三级菜单

效果如下: 第一步,插入相关的js和css文件 link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0....

Bootstrap 3的多级下拉菜单示例

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁、大气的Bootstrap界面上靠,着实要费一些功夫。下面分享一个Bootstrap 3的多级下拉菜单,无需第三方J...

Bootstrap左侧下拉三级菜单导航

  • 2017年11月22日 10:57
  • 499KB
  • 下载

一周乱弹(3-18 bootstrap模态框表单提交、jsp页面获取项目路径、bootstrap三级导航菜单、css是否显示属性)

1、bootstrap 模态框表单提交   如果按照bootstrap的模态框架构来,最后的保存要放在form外,但是提交按钮放在form之外则不能提交表单,所以要放在form之内。 ...

基于BootStrap 的城市三级联动。

HTML代码部分                                        省                                             ...

【jsp】下拉三级联动(bootstrap等全版本兼容)

一、功能说明 1,三级联动js版,简单易用,引入一个js文件,即可应用 2,内含全国地区 3,bootstrap等全版本兼容 二、源码(js需下载) 全国城市三级联动 body...
  • yjqyyjw
  • yjqyyjw
  • 2016年11月23日 15:29
  • 1256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap 三级导航
举报原因:
原因补充:

(最多只允许输入30个字)