bootsnav bootstrap自适应多级菜单导航效果代码-html代码-BFW代码库

bootsnav bootstrap自适应多级菜单导航效果代码

代码语言：html

代码描述：bootsnav bootstrap自适应多级菜单导航效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于bootsnav的简洁多级导航菜单</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootsnav.css">
    <style type="text/css">
    
        .navbar-brand{
        		    padding: 29px 15px;
        		    height: auto;
        		}
        		nav.navbar.bootsnav{
        		    border: none;
        		    margin-bottom: 150px;
        		}
        		.navbar-nav{
        		    float: left;
        		}
        		nav.navbar.bootsnav ul.nav > li > a{
        		    color: #474747;
        		    text-transform: uppercase;
        		    padding: 30px;
        		}
        		nav.navbar.bootsnav ul.nav > li:hover{
        		    background: #f4f4f4;
        		}
        		.nav > li:after{
        		    content: "";
        		    width: 0;
        		    height: 5px;
        		    background: #34c9dd;
        		    position: absolute;
        		    bottom: 0;
        		    left: 0;
        		    transition: all 0.5s ease 0s;
        		}
        		.nav > li:hover:after{
        		    width: 100%;
        		}
        		nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
        		    content: "+";
        		    font-family: 'FontAwesome';
        		    font-size: 16px;
        		    font-weight: 500;
        		    position: absolute;
        		    top: 35%;
        		    right: 10%;
        		    transition: all 0.4s ease 0s;
        		}
        		nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
        		    content: "\f105";
        		    transform: rotate(90deg);
        		}
        		.dropdown-menu.multi-dropdown{
        		    position: absolute;
        		    left: -100% !important;
        		}
        		nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
        		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        		    border: none;
        		}
        		@media only screen and (max-width:990px){
        		    nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
        		    nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
        		    .dropdown-menu.multi-dropdown{ left: 0 !important; }
        		    nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
        		    nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
        		}
    </style>
</head>

<body>

    <div class="demo" style="padding: 2em 0;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-default navbar-mobile bootsnav">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
								<i class="fa fa-bars"></i>
							</button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-menu">
                            <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About Us</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Custom Menu</a></li>
                                        <li><a href="#">Custom Menu</a></li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Custom Menu</a></li>
                                                <li><a href="#">Custom Menu</a></li>
                                                &.........完整代码请登录后点击上方下载按钮下载查看