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在导航条中的二级菜单下实现三级菜单直接上代码 <div cl

Bootstrap 3的多级下拉菜单示例

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

Bootstrap3多级导航菜单 三级菜单

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

bootstrap导航条--三级菜单

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

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

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

基于BootStrap 的城市三级联动。

HTML代码部分                                       ...

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

一、功能说明 1,三级联动js版,简单易用,引入一个js文件,即可应用 2,内含全国地区 3,bootstrap等全版本兼容 二、源码(js需下载) 全国城市三级联动 body...

分类导航支持二级三级分类

分类导航运用CSS控制UpdatePane    .my_left_category { width: 130px; ...

jquery实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单 效果图: 引入文件,font-awesome为字体库文件: css代码: ul { list-st...

div+css水平三级导航菜单

纯div+css水平三级导航菜单_ /* common styling */ .menu {font-family: arial, sans-serif; width:749px; heigh...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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