欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery+css實現(xiàn)側(cè)邊導(dǎo)航欄效果

 更新時間：2021年07月26日 14:11:06   作者：lms_碼農(nóng)  
這篇文章主要為大家詳細(xì)介紹了jquery+css實現(xiàn)側(cè)邊導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近做項目的時候，突然想用一個側(cè)邊導(dǎo)航欄，網(wǎng)上找了幾個插件，有的太丑而且不太符合我的預(yù)期。與其修改別人的代碼，不如自己來寫一個了。廢話不多說先上圖，感興趣的請繼續(xù)看下去。

1、效果圖 　　

當(dāng)有頂部導(dǎo)航欄的時候側(cè)邊導(dǎo)航欄會消失。

響應(yīng)式方面，同樣的頂部導(dǎo)航欄消失后右下角的圖標(biāo)才出現(xiàn)。點擊出現(xiàn)導(dǎo)航，選中后消失；

這里是個demo ，沒有做平滑滾動，需要的可以自己加上。

大體就介紹這么多吧，下面上代碼。

2、css代碼

這里是css代碼，詳情請看注釋

<style>

  /*重置一些樣式*/
  *, *::after, *::before {
   box-sizing: border-box;
   /*padding: 0;*/
   margin: 0;
   font-size: 14px;
  }
  .cd-vertical-nav ul{
   list-style: none;
  }
  a {
   color: #c0a672;
   text-decoration: none;
  }

  .nav{
   height: 80px;
  }

  .cd-image-replace {
   /* 小屏顯示的圖標(biāo) */
   display: inline-block;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   color: transparent;
  }

  /* --------------------------------

  小屏?xí)r的圖標(biāo)樣式，和小圖標(biāo)響應(yīng)式的顯示與隱藏

  -------------------------------- */
  .cd-nav-trigger {
   display: block;
   position: fixed;
   z-index: 2;
   bottom: 30px;
   right: 5%;
   height: 44px;
   width: 44px;
   border-radius: 0.25em;
   background: rgba(9, 150,90, 0.9);
   /* reset button style */
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
   border: none;
   outline: none;
  }
  .cd-nav-trigger span {
   position: absolute;
   height: 4px;
   width: 4px;
   background-color: #3a2c41;
   border-radius: 50%;
   left: 50%;
   top: 50%;
   bottom: auto;
   right: auto;
   transform: translateX(-50%) translateY(-50%);
  }
  .cd-nav-trigger span::before, .cd-nav-trigger span::after {
   content: '';
   position: absolute;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: #3a2c41;
   border-radius: inherit;
  }
  .cd-nav-trigger span::before {
   top: -9px;
  }
  .cd-nav-trigger span::after {
   bottom: -9px;
  }

  @media only screen and (min-width: 768px) {
   .cd-nav-trigger {
    display: none;
   }
  }

  /* --------------------------------

  導(dǎo)航條的背景等屬性

  -------------------------------- */
  /*移動優(yōu)先原則 這里是小屏?xí)r的導(dǎo)航*/
  .cd-vertical-nav {
   position: fixed;
   z-index: 1;
   right: 5%;
   bottom: 30px;
   width: 90%;
   max-width: 400px;
   max-height: 90%;
   overflow-y: auto;
   transform: scale(0);
   transform-origin: right bottom;
   transition: transform 0.2s;
   border-radius: 0.25em;
   background-color: rgba(9, 9, 9, 0.9);
  }
  .cd-vertical-nav li{
   height:auto;
  }
  .cd-vertical-nav a {
   display: block;
   padding: 1em;
   color: #3a2c41;
   font-weight: bold;
   border-bottom: 1px solid rgba(58, 44, 65, 0.1);
  }
  .cd-vertical-nav a.active {
   color: #c0a672;
  }
  .cd-vertical-nav.open {
   transform: scale(1);
   z-index: 10;
   -webkit-overflow-scrolling: touch;
  }
  .cd-vertical-nav.open + .cd-nav-trigger {
   background-color: transparent;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span {
   background-color: rgba(58, 44, 65, 0);
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
   /* 給點擊后的按鈕做叉號（×）樣式 */
   height: 3px;
   width: 20px;
   border-radius: 0;
   left: -8px;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::before {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   top: 1px;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::after {
   -webkit-transform: rotate(135deg);
   -moz-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   -o-transform: rotate(135deg);
   transform: rotate(135deg);
   bottom: 0;
  }
  @media only screen and (min-width: 768px) {
   .cd-vertical-nav {
    /* pc端展示的效果，首先重置一下樣式 */
    right: 0;
    top: 0;
    bottom: auto;
    text-align: center;

    /*這里的vh是相對可視屏幕的高度，100vh表示高度始終等于瀏覽器可是高度*/
    height: 100vh;
    width: 90px;
    max-width: none;
    max-height: none;
    transform: scale(1);
    background-color: transparent;
    overflow: hidden;
    /* 下面通過flex彈性盒子，讓內(nèi)容的主軸線編程垂直的。
    然后通過修改主軸的元素排列方式讓他們居中*/
    display: flex;
    flex-direction: column;
    justify-content: center;
   }

   /*下面通過調(diào)節(jié)內(nèi)容的縮放比和padding，margin等屬性來調(diào)節(jié)個選項間的距離，實現(xiàn)動畫效果*/
   .cd-vertical-nav::before {
    /* 背景色 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    transition: transform 0.4s;
   }

   .cd-vertical-nav:hover::before {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
   }

   .cd-vertical-nav ul {
    vertical-align: middle;
    text-align: center;
    padding-left: 15px;
   }

   .cd-vertical-nav a {
    position: relative;
    padding: 0.5em 0 0;
    margin:0 auto;
    border-bottom: none;
    font-size: 1.2rem;
    color: #eaf2e3;
    transition: all .5s;
   }

   .cd-vertical-nav a.active i{
    background-color: #00a58c;
    color: #ffffff;
   }
   .cd-vertical-nav a.active span{
    color: #00a58c;
   }
   .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before {
    background-color: #c0a672;
   }
   .cd-vertical-nav .label {
    display: block;
    opacity: 0;
    transform: translateX(150%);
    height: 0;
    transition: all 0.5s;
   }

   .cd-vertical-nav:hover .label {
    height:auto;
    opacity: 1;
    transform: translateX(0);
    padding-top: 5px;
   }
   .cd-vertical-nav:hover a {
    padding: 1em 0 0;
    margin-top: 0.8em;
    margin-right: 15px;
   }
   .cd-vertical-nav i{
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #0a9dc7;
    background-color: #fff;
    transform: scale(0.3);
    transition: all 0.3s;
   }
   .cd-vertical-nav:hover i{
    transform: scale(1);
   }

  }
  /*配合頁面css*/
  section{
   height: 100vh;
  }
  section:nth-of-type(2n){
   background-color: #ff0000;
  }
  section:nth-of-type(2n+1){
   background-color: #ffff00;
  }
 </style>

3、html代碼 　　   

這里是html代碼，很簡單沒什么好說的。

<div class="nav">這是頂部的導(dǎo)航</div>

<nav class="cd-vertical-nav navbar collapse">
 <ul>
  <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首頁</span></a></li>
  <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">關(guān)于</span></a></li>
  <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li>
  <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作經(jīng)驗</span></a></li>
 </ul>
</nav>
<button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button>

<section id="tab1"></section>
<section id="tab2"></section>
<section id="tab3"></section>
<section id="tab4"></section>

4、js代碼 　　

下面我們看下js代碼。注釋很詳細(xì)，就不多說了。

<script src="js/jquery-1.10.2.min.js"></script><!--導(dǎo)入jquery庫-->
<script>
 $(function(){
  var a =$("section"); //獲取每個大塊的元素
  var b = [];
  for (i=0;i< a.length;i++){
   b[i]=a[i].offsetTop; //把每個大塊距離頁面最頂部的距離，賦給b數(shù)組
  }
  var c = $(window).scrollTop();//頁面刷新是獲取滾動條的位置
  if(c>=80){     //頂部導(dǎo)航欄高80；頂部導(dǎo)航消失的時候讓側(cè)邊導(dǎo)航出來
   $(".cd-vertical-nav").show();
   if(window.innerWidth<768){  //小屏的情況下讓按鈕隱藏/出現(xiàn)
    $(".cd-nav-trigger").show();}
  }else {      //否則讓它隱藏
   $(".cd-vertical-nav").hide();
   if(window.innerWidth<768) {
    $(".cd-nav-trigger").hide();
   }
  }

  $(window).scroll(function(){  //監(jiān)聽滾動條的滾動事件
   c = $(window).scrollTop();  //實時監(jiān)聽滾動條位置
   if(c>=80){      //頁面滾動時，判斷滾動條位置，控制側(cè)邊導(dǎo)航的隱顯
    $(".cd-vertical-nav").show();
    if(window.innerWidth<768){
     $(".cd-nav-trigger").show();}
   }else {

    $(".cd-vertical-nav").hide();
    $(".cd-nav-trigger").hide();
   }

   //下面是判斷頁面所處位置，實時更新導(dǎo)航條，是導(dǎo)航欄選項跟頁面同步
   for (i=0;i< a.length;i++){
    var d =c-b[i]; //c是滾動條位置，b是元素到頁面頂部的距離，d表示當(dāng)前瀏覽器頂部所處的位置。
    var e = a[i].offsetHeight; //獲取元素的高度
    var f = a[i].id;   //獲取元素的id
    var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串，通過屬性選擇器找到當(dāng)前所處頁面對應(yīng)的超鏈接
    if (d>=0&&d<e){
     if(g.hasClass("active")){  //如果當(dāng)前元素本就處于激活狀態(tài)直接break
      break;
     }

     //如果當(dāng)前頁面沒有處于激活狀態(tài)，就將正在激活的移出激活的樣式表
     $(".cd-vertical-nav .active").removeClass("active");
     g.addClass("active"); //給當(dāng)前需要激活的屬性添加激活樣式表
     break;
    }
   }
  });
 })

 //下面為小屏?xí)r通過點擊按鈕開關(guān)導(dǎo)航欄，
 $(".cd-nav-trigger").on("click",function(){
  //處于open狀態(tài)，就關(guān)閉
  if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open");
  //反之打開
  else $(".cd-vertical-nav").addClass("open");
 })
 //選中導(dǎo)航某一項后，關(guān)閉導(dǎo)航欄
 $(".cd-vertical-nav a").on("click",function(){
  $(".cd-vertical-nav").removeClass("open");

 })
</script>

今天的分享就到這里了，大家有什么意見盡管提，希望能對大家有所幫助。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

  • 學(xué)習(xí)jquery必備 api中英文對照的chm手冊 下載

    學(xué)習(xí)jquery必備 api中英文對照的chm手冊 下載

    學(xué)習(xí)jquery必備 api中英文對照的chm手冊 下載...
    2007-05-05
  • 深入解析jQuery中Deferred的deferred.promise()方法

    深入解析jQuery中Deferred的deferred.promise()方法

    這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下
    2016-05-05
  • jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解

    jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解

    jQuery插件開發(fā)分為兩種：1 類級別、2 對象級別，下面為大家詳細(xì)介紹下
    2014-01-01
  • jQuery ajax實現(xiàn)省市縣三級聯(lián)動

    jQuery ajax實現(xiàn)省市縣三級聯(lián)動

    這篇文章主要為大家詳細(xì)介紹了jQuery ajax實現(xiàn)省市縣三級聯(lián)動的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • select標(biāo)簽?zāi)M/美化方法采用JS插件

    select標(biāo)簽?zāi)M/美化方法采用JS插件

    select標(biāo)簽的外觀問題很惱人，各個瀏覽器都不一致，單單就IE，一個版本就一個長相，還不能用CSS修飾，接下來將本人對select的美化方法共享出來，感興趣的朋友可以參考下
    2013-04-04
  • jQuery DIV彈出效果實現(xiàn)代碼

    jQuery DIV彈出效果實現(xiàn)代碼

    現(xiàn)在很多網(wǎng)站都流行這種彈出式的對話框或是信息顯示框，很想將這個流行元素加入到自己的項目中。使用jQuery可以不費大力氣實現(xiàn)這種效果。將其記錄到我的Blog中，與業(yè)界朋友們起分享。
    2009-07-07
  • javascript異步處理與Jquery deferred對象用法總結(jié)

    javascript異步處理與Jquery deferred對象用法總結(jié)

    這篇文章主要介紹了javascript異步處理與Jquery deferred對象用法,結(jié)合實例形式總結(jié)分析了jQuery異步請求處理相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • 用jquery生成二級菜單的實例代碼

    用jquery生成二級菜單的實例代碼

    這篇文章介紹了用jquery生成二級菜單的代碼，需要的朋友可以參考一下
    2013-06-06
  • jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù)

    jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù)

    這篇文章主要介紹了jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù),文中示例服務(wù)器端為C#程序,需要的朋友可以參考下
    2015-06-06

    • 最新評論