如何製作一個吸頂式的選單列

一個好用的選單系統,可以幫助使用者快速找到所需的內容,如果你經常觀察網頁的趨勢,因該很容易發現許多網站開始將選單列常駐在頁面的頂部,而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時,不用為了點選選單而去捲動頁面,算是一個很貼心的 UX 規劃。做法也有很多種,從純粹的 CSS 到 Javascript 都有,網路上也有很多現成的範例,下面我們以 On Scroll Header Effects 為例:

第一步:建立導覽列

 

<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1><span>Header Effects</span></h1>
<nav>
<a>‹ Previous Demo</a>
<a>Something</a>
<a>Anything</a>
<a>Back to the article</a>
</nav>
</div>
<div class="ha-header-bottom">
<nav>
<a>Dalliance</a>
<a>Inglenook</a>
<a>Lagniappe</a>
<a>Mellifluous</a>
<a>Erstwhile</a>
<a>Wafture</a>
<a>Serendipity</a>
<a>Love</a>
</nav>
</div>
</div>
</header>

 

第二步:建立切換點

這步驟是精華,每一個 Section 都是一個切換點,第一個 Section 通常不會下任何參數。但從第二個 Section 後,每一個都會加 data-animate-up (往上捲動) 和 data-animate-down (往下捲動) 的效果參數。

 

<section>...</section>
<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-rotateBack">...</section>

 

可設置的參數如下:

  • ha-header-small:縮小 header
  • ha-header-large:放大 header
  • ha-header-hide:隱藏 header
  • ha-header-show:秀出預設的 header
  • ha-header-subshow:秀出 header 的子選單
  • ha-header-shrink 和 ha-header-rotateBack:成為獨立區塊
  • ha-header-rotate:秀出獨立區塊的子選單
  • ha-header-color:變成半透明區塊
  • ha-header-box:變成手機的導覽 icon
  • ha-header-fullscreen:變成全螢幕
  • ha-header-subfullscreen:把螢幕切為上下兩部分,且半透明

上述這些效果都是預設好的,如果你要調整它的效果,也可以到 component.css 裡尋找相對應的 class 調整即可。

第三步:載入 css

 

<link rel="stylesheet" type="text/css" href="HeaderEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="HeaderEffects/css/component.css" />

 

第四步:載入 Javascript & jQuery

請在 </body> 之前,放入下面的 code

 

<script src="HeaderEffects/js/jquery.min.js"></script>
  <script src="HeaderEffects/js/waypoints.min.js"></script>
  <script>
  var $head = $( '#ha-header' );
  $( '.ha-waypoint' ).each( function(i) {
  var $el = $( this ),
  animClassDown = $el.data( 'animateDown' ),
  animClassUp = $el.data( 'animateUp' );
$el.waypoint( function( direction ) {
  if( direction === 'down' && animClassDown ) {
  $head.attr('class', 'ha-header ' + animClassDown);
  }
  else if( direction === 'up' && animClassUp ){
  $head.attr('class', 'ha-header ' + animClassUp);
  }
  }, { offset: '100%' } );
  } );
  </script>

 

在 </head> 之前加入下面的 code 即完成。

 

<script src="HeaderEffects/js/modernizr.custom.js"></script>

 

你的觀點