jQuery和css3全屏彈出式導航選單特效外掛

skonw發表於2024-12-09
jQueryCSSS3特效

這是一款效果非常酷的jQuery和css3全屏彈出式導航選單特效外掛。

線上預覽 下載

HTML結構

html結構使用一個<header>作為wrapper。裡面放logo、登入/註冊按鈕和用於觸發全屏導航選單的觸發按鈕。全屏導航選單放置在header外面，為它使用easier的 CSS transformation效果。

< header class="cd-header">
  < div class="cd-logo">  

  < nav >
    < ul class="cd-secondary-nav">
      < li >< a href="#0">Log In
      < li >< a href="#0">Register
    
    

  < a class="cd-primary-nav-trigger" href="#0">
    < span class="cd-menu-text">Menu< span class="cd-menu-icon">
    


< nav >
  < ul class="cd-primary-nav">
    < li class="cd-label">About us

    < li >< a href="#0">The team
    < li >< a href="#0">Our services
    < li >< a href="#0">Our projects
    < li >  
  


< main >

CSS樣式

為了製作全屏選單的滑動效果，我們結合使用了CSS3 transitions和transformations。開始時，導航選單被隱藏，它被放置在螢幕的上方（translateY(-100%)）。當使用者點選了觸發按鈕.cd-primary-nav-trigger，我們使用jQuery為導航選單新增class .is-visible。在transition屬性中使用transform 使動畫更加平滑。

.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  position :  fixed ;
  left :  0 ;
  top :  0 ;
  height :  100% ;
  width :  100% ;
  transform: translateY( -100% );
  transition-property: transform;
  transition-duration:  0.4 s;
}

.cd-primary-nav.is- visible {
  transform: translateY( 0 );
}

對於頂部選單的滑動顯示效果-頂部選單在使用者往上滾動滑鼠時出現，我們需要建立一些class並用jQuery來控制它們。預設情況下，頂部導航選單是絕對定位的：意思是它會隨內容一起滾動。當頂部選單不可見時，我們給它class .is-fixed，將它的定位從absolute改變為fixed，並將它放在視窗的右上方（top: -80px）。當使用者往上滾動頁面，我們給頂部選單.is-visible，使它從Y軸往下移動（translate3d(0, 100%, 0)）。

.cd-header {
  position :  absolute ;
  top :  0 ;
  left :  0 ;
  background :  transparent ;
  height :  80px ;
  width :  100% ;
  transition: background-color  0.3 s;
}

.cd-header.is- fixed {
  /* when the user scrolls down, we hide the header right above the viewport */
  position :  fixed ;
  top :  -80px ;
  background-color : rgba( 2 ,  23 ,  37 ,  0.96 );
  transition: transform  0.3 s;
}

.cd-header.is- visible {
  /* if the user changes the scrolling direction, we show the header */
  transform: translate 3 d( 0 ,  100% ,  0 );
}

JAVASCRIPT

當使用者開始滾動滑鼠，我們需要檢查是向上還是向下滾動，為頂部選單新增/移除相應的class。

$(window).on( 'scroll' ,
  {
      previousTop: 0
  }, 
  function () {
      var currentTop = $(window).scrollTop();
      //check if user is scrolling up
      if (currentTop <  this .previousTop ) {
        //if scrolling up...
        //add class 'is-visible' to the main navigation
        //if currentTop == 0, remove 'is-fixed' and 'is-visible' classes 
      }  else {
        //if scrolling down...
        //add the 'is-fixed' class to the main navigation as soon as it is no longer visible
        //add class 'is-visible' to the main navigation
      }
      //set previousTop for the next iteration
      this .previousTop = currentTop;
  }
);

注意，頂部選單的上下滑動效果只用在大螢幕（解析度大於1170px）的瀏覽器上才有效果。

相關文章