【程序猿分享】精美的Bootstrap背景导航

分享一下Bootstrap固定背景的导航。

废话不多说，先上效果图。
1、这是和背景图连在一起的导航效果图。

2、当开始向下浏览时候，导航会固定在顶部。

需要插件

<link href="css/bootstrap.min.css" rel="stylesheet" media="all"><link href="css/bootsnav.css" rel="stylesheet" media="all"><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/bootsnav.js"></script>

源码如下：

 <div class="home-nav container">        <!-- Start Atribute Navigation -->        <div class="attr-nav">            <ul>                <li class="dropdown">                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >                        <i class="fa fa-shopping-bag"></i>                        <span class="badge">3</span>                    </a>                    <ul class="dropdown-menu cart-list">                        <li>                            <a href="#" class="photo"><img src="images/thumb/thumb01.jpg" class="cart-thumb" alt="" /></a>                            <h6><a href="#">Delica omtantur </a></h6>                            <p>2x - <span class="price">$99.99</span></p>                        </li>                        <li>                            <a href="#" class="photo"><img src="images/thumb/thumb02.jpg" class="cart-thumb" alt="" /></a>                            <h6><a href="#">Omnes ocurreret</a></h6>                            <p>1x - <span class="price">$33.33</span></p>                        </li>                        <li>                            <a href="#" class="photo"><img src="img/logo-black.png" class="cart-thumb" alt="" /></a>                            <h6><a href="#">Agam facilisis</a></h6>                            <p>2x - <span class="price">$99.99</span></p>                        </li>                        <li class="total">                            <span class="pull-right"><strong>Total</strong>: $0.00</span>                            <a href="#" class="btn btn-default btn-cart">Cart</a>                        </li>                    </ul>                </li>                <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>                <li class="side-menu"><a href="#"><i class="fa fa-bars"></i></a></li>            </ul>        </div>        <!-- End Atribute Navigation -->        <!-- Start Header Navigation -->        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">                <i class="fa fa-bars"></i>            </button>            <a class="navbar-brand" href="#brand">                <img src="img/logo.png" class="logo logo-display" alt="">                <img src="img/logo.png" class="logo logo-scrolled" alt="">            </a>        </div>        <!-- End Header Navigation -->        <!-- Collect the nav links, forms, and other content for toggling -->        <div class="collapse navbar-collapse" id="navbar-menu">            <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">                <li><a href="#">首页</a></li>                <li><a href="#">我是什么</a></li>                <li><a href="#">能干什么</a></li>                <li><a href="#">怎么使用</a></li>                <li class="dropdown megamenu-fw">                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">我是广告</a>                    <ul class="dropdown-menu megamenu-content" role="menu">                        <li>                            <div class="row">                                <div class="col-menu col-md-3">                                    <h6 class="title">Title Menu One</h6>                                    <div class="content">                                        <ul class="menu-col">                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                        </ul>                                    </div>                                </div><!-- end col-3 -->                                <div class="col-menu col-md-3">                                    <h6 class="title">Title Menu Two</h6>                                    <div class="content">                                        <ul class="menu-col">                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                        </ul>                                    </div>                                </div><!-- end col-3 -->                                <div class="col-menu col-md-3">                                    <h6 class="title">Title Menu Three</h6>                                    <div class="content">                                        <ul class="menu-col">                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                        </ul>                                    </div>                                </div>                                <div class="col-menu col-md-3">                                    <h6 class="title">Title Menu Four</h6>                                    <div class="content">                                        <ul class="menu-col">                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                            <li><a href="#">Custom Menu</a></li>                                        </ul>                                    </div>                                </div><!-- end col-3 -->                            </div><!-- end row -->                        </li>                    </ul>                </li>            </ul>        </div><!-- /.navbar-collapse -->    </div>    <!-- Start Side Menu -->    <div class="side">        <a href="#" class="close-side"><i class="fa fa-times"></i></a>        <div class="widget">            <h6 class="title">Custom Pages</h6>            <ul class="link">                <li><a href="#">About</a></li>                <li><a href="#">Services</a></li>                <li><a href="#">Blog</a></li>                <li><a href="#">Portfolio</a></li>                <li><a href="#">Contact</a></li>            </ul>        </div>        <div class="widget">            <h6 class="title">Additional Links</h6>            <ul class="link">                <li><a href="#">Retina Homepage</a></li>                <li><a href="#">New Page Examples</a></li>                <li><a href="#">Parallax Sections</a></li>                <li><a href="#">Shortcode Central</a></li>                <li><a href="#">Ultimate Font Collection</a></li>            </ul>        </div>    </div>

CSS源码

/* Share=================================*/nav.navbar.bootsnav .share{    padding: 0 30px;    margin-bottom: 30px;}nav.navbar.bootsnav .share ul{    display: inline-block;    padding: 0;    margin: 0 0 -7px 0;    list-style: none;}nav.navbar.bootsnav .share ul > li{    float: left;    display: block;    margin-right: 5px;}nav.navbar.bootsnav .share ul > li > a{    display: table-cell;    vertical-align: middle;    text-align: center;    width: 35px;    height: 35px;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    -o-border-radius: 50%;    border-radius: 50%;    background-color: #cfcfcf;    color: #fff;}/* Transparent=================================*/nav.navbar.bootsnav.navbar-fixed{    position: fixed;    display: block;    width: 100%;}nav.navbar.bootsnav.no-background{    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    -ms-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;}/* Navbar Sticky=================================*/.wrap-sticky{    position: relative;}.wrap-sticky nav.navbar.bootsnav{    position: absolute;    width: 100%;    left: 0;    top: 0;}.wrap-sticky nav.navbar.bootsnav.sticked{    position: fixed;    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}body.on-side .wrap-sticky nav.navbar.bootsnav.sticked{    left: -280px;}/* Navbar Responsive=================================*/@media (min-width: 1024px) and (max-width:1400px) {    body.wrap-nav-sidebar .wrapper .container{        width: 100%;        padding-left: 30px;        padding-right: 30px;    }}@media (min-width: 1024px) {    /* General Navbar    =================================*/    nav.navbar.bootsnav ul.nav .dropdown-menu .dropdown-menu{        margin-top: -2px;    }    nav.navbar.bootsnav ul.nav.navbar-right .dropdown-menu .dropdown-menu{        left: -200px;    }    nav.navbar.bootsnav ul.nav > li > a{        padding: 30px 15px;        font-weight: 600;    }    nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{        font-family: 'FontAwesome';        content: "\f0d7";        margin-left: 5px;        margin-top: 2px;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu{        -moz-box-shadow: 0px 0px 0px;        -webkit-box-shadow: 0px 0px 0px;        -o-box-shadow: 0px 0px 0px;        box-shadow: 0px 0px 0px;        -moz-border-radius: 0px;        -webkit-border-radius: 0px;        -o-border-radius: 0px;        border-radius: 0px;        padding: 0;        width: 200px;        background: #fff;        border: solid 1px #e0e0e0;        border-top: solid 5px;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover,    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover{        background-color: transparent;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li > a{        padding: 10px 15px;        border-bottom: solid 1px #eee;        color: #6f6f6f;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li:last-child > a{        border-bottom: none;    }    nav.navbar.bootsnav ul.navbar-right li.dropdown ul.dropdown-menu li a{        text-align: right;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu li.dropdown > a.dropdown-toggle:before{        font-family: 'FontAwesome';        float: right;        content: "\f105";        margin-top: 0;    }    nav.navbar.bootsnav ul.navbar-right li.dropdown ul.dropdown-menu li.dropdown > a.dropdown-toggle:before{        font-family: 'FontAwesome';        float: left;        content: "\f104";        margin-top: 0;    }    nav.navbar.bootsnav li.dropdown ul.dropdown-menu ul.dropdown-menu{        top: -3px;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content{        padding: 0 15px !important;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content > li{       padding: 25px 0 20px;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content.tabbed{        padding: 0;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content.tabbed > li{        padding: 0;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .col-menu{        padding: 0 30px;        margin: 0 -0.5px;        border-left: solid 1px #f0f0f0;        border-right: solid 1px #f0f0f0;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .col-menu:first-child{        border-left: none;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .col-menu:last-child{        border-right: none;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content{        display: none;    }    nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li a{        text-align: left;        padding: 5px 0;        display: block;        width: 100%;        margin-bottom: 0;        border-bottom: none;        color: #6f6f6f;    }    nav.navbar.bootsnav.on ul.dropdown-menu.megamenu-content .content{        display: block !important;        height: auto !important;    }    /* Navbar Transparent    =================================*/      nav.navbar.bootsnav.no-background{        background-color: transparent;        border: none;    }    nav.navbar.bootsnav.navbar-transparent .attr-nav{        padding-left: 15px;        margin-left: 30px;    }    nav.navbar.bootsnav.navbar-transparent.white{        background-color: rgba(255,255,255,0.3);        border-bottom: solid 1px #bbb;    }    nav.navbar.navbar-inverse.bootsnav.navbar-transparent.dark,    nav.navbar.bootsnav.navbar-transparent.dark{        background-color: rgba(0,0,0,0.3);        border-bottom: solid 1px #555;    }    nav.navbar.bootsnav.navbar-transparent.white .attr-nav{        border-left: solid 1px #bbb;    }    nav.navbar.navbar-inverse.bootsnav.navbar-transparent.dark .attr-nav,    nav.navbar.bootsnav.navbar-transparent.dark .attr-nav{        border-left: solid 1px #555;    }    nav.navbar.bootsnav.no-background.white .attr-nav > ul > li > a,    nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li > a,    nav.navbar.bootsnav.navbar-transparent.white ul.nav > li > a,    nav.navbar.bootsnav.no-background.white ul.nav > li > a{        color: #fff;    }    nav.navbar.bootsnav.navbar-transparent.dark .attr-nav > ul > li > a,    nav.navbar.bootsnav.navbar-transparent.dark ul.nav > li > a{        color: #eee;    }    nav.navbar.bootsnav.navbar-fixed.navbar-transparent .logo-scrolled,    nav.navbar.bootsnav.navbar-fixed.no-background .logo-scrolled{        display: none;    }    nav.navbar.bootsnav.navbar-fixed.navbar-transparent .logo-display,    nav.navbar.bootsnav.navbar-fixed.no-background .logo-display{        display: block;    }    nav.navbar.bootsnav.navbar-fixed .logo-display{        display: none;    }    nav.navbar.bootsnav.navbar-fixed .logo-scrolled{        display: block;    }    /* Atribute Navigation    =================================*/        .attr-nav > ul > li.dropdown ul.dropdown-menu{        margin-top: 0;        margin-left: 55px;        width: 250px;        left: -250px;    }    /* Menu Center    =================================*/    nav.navbar.bootsnav.menu-center .container{        position: relative;    }    nav.navbar.bootsnav.menu-center ul.nav.navbar-center{        float:none;        margin: 0 auto;        display: table;        table-layout: fixed;    }    nav.navbar.bootsnav.menu-center .navbar-header,    nav.navbar.bootsnav.menu-center .attr-nav{        position: absolute;    }    nav.navbar.bootsnav.menu-center .attr-nav{        right: 15px;    }    /* Navbar Brand top    =================================*/    nav.bootsnav.navbar-brand-top .navbar-header{        display: block;        width: 100%;        text-align: center;    }    nav.bootsnav.navbar-brand-top ul.nav > li.dropdown > ul.dropdown-menu{        margin-top: 2px;    }    nav.bootsnav.navbar-brand-top ul.nav > li.dropdown.megamenu-fw > ul.dropdown-menu{        margin-top: 0;    }    nav.bootsnav.navbar-brand-top .navbar-header .navbar-brand{        display: inline-block;        float: none;        margin: 0;    }    nav.bootsnav.navbar-brand-top .navbar-collapse{        text-align: center;    }    nav.bootsnav.navbar-brand-top ul.nav{        display: inline-block;        float: none;        margin: 0 0 -5px 0;    }    /* Navbar Center    =================================*/    nav.bootsnav.brand-center .navbar-header{        display: block;        width: 100%;        position: absolute;        text-align: center;        top: 0;        left: 0;    }    nav.bootsnav.brand-center .navbar-brand{        display: inline-block;        float: none;    }    nav.bootsnav.brand-center .navbar-collapse{        text-align: center;        display: inline-block;        padding-left: 0;        padding-right: 0;    }    nav.bootsnav.brand-center ul.nav > li.dropdown > ul.dropdown-menu{        margin-top: 2px;    }    nav.bootsnav.brand-center ul.nav > li.dropdown.megamenu-fw > ul.dropdown-menu{        margin-top: 0;    }    nav.bootsnav.brand-center .navbar-collapse .col-half{        width: 50%;        float: left;        display: block;    }    nav.bootsnav.brand-center .navbar-collapse .col-half.left{        text-align: right;        padding-right: 100px;    }    nav.bootsnav.brand-center .navbar-collapse .col-half.right{        text-align: left;        padding-left: 100px;    }    nav.bootsnav.brand-center ul.nav{        float: none !important;        margin-bottom: -5px !important;        display: inline-block !important;    }    nav.bootsnav.brand-center ul.nav.navbar-right{        margin: 0;    }    nav.bootsnav.brand-center.center-side .navbar-collapse .col-half.left{        text-align: left;        padding-right: 100px;    }    nav.bootsnav.brand-center.center-side .navbar-collapse .col-half.right{        text-align: right;        padding-left: 100px;    }