2. 程式人生 > >【程式猿分享】精美的Bootstrap背景導航

【程式猿分享】精美的Bootstrap背景導航

阿新 • • 發佈：2019-01-26

分享一下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 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
【程式猿分享】精美的Bootstrap背景導航

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

廢話不多說，先上效果圖。 
1、這是和背景圖連在一起的導航效果圖。 
 
2、當開始向下瀏覽時候，導航會固定在頂部。 




需要外掛

<link href="css/bootstrap.min.css"  



  
 

    


    
    
【程式猿分享】優秀的js外掛分享

     
 
								
								            
							
							
							寫在前面的廢話


  ios-parallax.js是一款模擬蘋果iOS10樣式背景圖片視覺差效果的jquery外掛。該背景圖片視覺差效果在使用者移動滑鼠時，背景圖片會相應的搖晃，形成視覺差特效。

 



  
 

    


    
    
【程式猿之洞】雖然程式猿總是被遊客調戲，但是仍堅定不移的追尋它的香蕉

     
 
        

個人資訊 

就職： 聚項資訊科技有限公司
職位：中級Java開發工程師
負責：上汽系統開發與維護
院校：河南理工大學
專業：軟體工程12級
郵箱：[email protected]
Q Q ：10101000101001010111
1101111010 



  
 

    


    
    
【程式設計師江湖】更多內容請關注微信公眾號：程式設計師江湖  |  收穫BAT頭條網易等大廠研發offer的校招老司機，專注於分享校招乾貨與技術文章。包括但不限於：求職準備，網申技巧，筆經面經，簡歷指南等內容。更有Java學習指南，技術面試知識點等方面的文章，偶爾

     
 
			
				程式設計師江湖
			
			更多內容請關注微信公眾號：程式設計師江湖  |  收穫BAT頭條網易等大廠研發offer的校招老司機，專注於分享校招乾貨與技術文章。包括但不限於：求職準備，網申技巧，筆經面經，簡歷指南等內容。更有Java...
		
		
         



  
 

    


    
    
【程式猿的黑科技】一些好玩的APP推薦

     
 
							
							
							【前言】

本期將介紹幾個好玩及實用的APP。為大家分享有趣的工具及資源是我建立此專欄的初衷。我也會定期收集一些好玩的“黑科技”供大家研究。

1.MIX 輕量級圖片處理工具

APP UI 
 
初始介面 


操作演示 1



操作演示 2



功能：包 



  
 

    


    
    
【Bugly乾貨分享】手把手教你逆向分析 Android 程式

     
 
							
							
							很多人寫文章，喜歡把什麼行業現狀啊，研究現狀啊什麼的寫了一大通，感覺好像在寫畢業論文似的，我這不廢話，先直接上幾個圖，感受一下。 


第一張圖是在把程式碼注入到地圖裡面，啟動首頁的時候彈出個浮窗，下載網路的圖片，蒼老師你們不會不認識吧？

第二張圖是微信運動步 



  
 

    


    
    
【小猿說】程式設計師喝酒解釋專業術語，笑死我了！

     
 
                

如果你的女朋友，還不怎麼理解IT行業術語！來看看這個超強段子，通俗又易懂。


大家喝的是啤酒。這時你入座了。

你給自己倒了杯可樂，這叫低配置。

你給自已倒了杯啤酒，這叫標準配置。

你給自己倒了杯茶水，這茶的顏色還跟啤酒一樣，這叫木馬。

你給自己倒了杯可樂，還滴了 



  
 

    


    
    
【老鳥分享】Linux命令行終端提示符多種實用技巧！

     
 linux   技巧   系統管理員    1.Linux命令行提示符簡介眾所周知，Linux命令行是系統管理員管理Linux的重要手段，我們管理Linux，首先要面對的就是Linux命令行提示符。Linux命令行結尾的提示符有“#”和“$”兩種不同的符號，如下所示：    [[email prot 



  
 

    


    
    
【源碼分享】ECtouch微商城，短信

     
 微商城   用戶   插件   壓縮包   功能介紹   源碼分享   解壓   手機   經驗   分享一下插件，有需要的可以了解下哦。插件說明
ECtouch已整合了互億無線的短信接口程序，安裝好ECtouch程序後，只需填入用戶名和密碼即可直接使用短信功能。
功能介紹
手機號短信驗證註冊
安裝步驟第一步 



  
 

    


    
    
【源碼分享】php怎樣接入短信驗證碼，對接短信驗證碼接口

     
 要求   reg   eth   pad   收集   我們   borde   value   一個   今天公司提出一個需求，要在現有項目上收集註冊用戶的真實手機號，由於之前沒有接觸過這一塊，只能尋求度娘的幫助，經過一天的努力，終於完成了，現整理記錄下已備查閱。
1 解決方案：在註冊時要求用戶進行手機驗證 



  
 

    


    
    
【源碼分享】短信平臺插件74cms_v4.1_騎士人才系統

     
 公司   插件   短信驗證碼   平臺   系統管   源碼分享   無線   com   文件   對接短信的時候發現一家短信公司，有些不錯的短信驗證碼的插件，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/
插件說明
本插件系互億無線針對74cms_v4.1開發，請按以下 



  
 

    


    
    
【插件分享】短信應用，短信對接友價源碼系統

     
 ebs   utf   nco   service   function   submit   use   word   很多   在互億無線短信平臺找到一個插件，在這邊分享一下，有需要可以了解，比自己開發要容易很多哦。http://www.ihuyi.com/插件說明本插件系互億無線針對友價源碼系統開發，請 



  
 

    


    
    
【源碼分享】短信驗證碼功能對接CmsEasy

     
 源碼分享   無線   設置   功能   之前   文件覆蓋   完成   系統管   版本   對接短信的時候發現一家短信公司，有些不錯的短信驗證碼的插件，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/插件說明本插件系互億無線針對CmsEasy_5.6_UTF-8_201 



  
 

    


    
    
【源碼分享】短信驗證碼如何對接 WordPressv4.0，短信插件

     
 word   www.   ont   wordpress   1.0   key   驗證   註冊   插件   對接短信的時候發現一家短信公司，有些不錯的短信驗證碼的插件，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/插件說明本插件系互億無線針對Wordpress開發， 



  
 

    


    
    
【視訊免費分享】基於Spring Boot技術棧 部落格系統企業級前後端實戰

     
  
  
  
 推薦視訊連結 
  
  Java 微服務實踐視訊教程 - Spring Boot 
  Java 微服務實踐 視訊教程- Spring Cloud 
  redis高可用視訊 
  分散式電商商城視訊教程 
  kubernets+docer 
  jvm 
  秒殺專案實戰 
  Lin 



  
 

    


    
    
【源碼分享】短信驗證碼如何實現微米CMS

     
 用戶   帳戶   登錄   article   不錯   原創   tail   發現   reg   對接短信的時候發現一家短信公司，有些不錯的短信驗證碼的插件，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/插件說明本插件系互億無線針對微米CMS_V29.2版本開發，請按 



  
 

    


    
    
【源碼分享】短信如何實現ECmall_V2.3驗證碼功能

     
 說明   管理   處理   用戶註冊   手機號   方便   功能介紹   發現   源碼   對接短信的時候發現一家短信公司，有些不錯的短信驗證碼的插件，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/
插件說明本插件系互億無線針對ECmall_V2.3短信插件開發，插件 



  
 

    


    
    
【插件分享】短信驗證碼對接得推校園O2O，短信功能

     
 步驟   提交   所有   用戶註冊   一個   插件開發   來源   鏈接   獲取驗證碼   在互億無線短信平臺找到一個插件，在這邊分享一下，有需要可以了解，比自己開發要容易很多哦。http://www.ihuyi.com/
插件說明本插件系互億無線針對得推校園O2O短信插件開發，插件內的所有文件均 



  
 

    


    
    
【插件分享】短信如何實現對接EmPireCMS帝國系統

     
 了解   分配   .com   註冊   rfi   img   cms   key   href   找到了一家不錯的短信插件，有需要對接的可以查看學習，在這邊分享一下，有需要的可以詳細看看，了解一下。http://www.ihuyi.com/
插件說明
本插件系互億無線針對海盜雲商2.1.4短信插件開發 



  
 

    


    
    
【插件分享】 OurPhp建站系統如何開發驗證碼短信

     
 博文   容易   https   短信接口   版權   短信平臺   自己   針對   ike   在互億無線短信平臺找到一個插件，在這邊分享一下，有需要可以了解，比自己開發要容易很多哦。http://www.ihuyi.com/
插件說明本插件系互億無線針對OURSHOP1.7.6短信插件開發，插件內