今日的範例依然是利用 jQuery animate 來達到效果 範例

HTML

  <nav>
    <ul>
      <li class="tab">
        <a href="#" class="tab-text">平台簡介</a>
      </li>
      <li class="tab">
        <a href="#" class="tab-text">課程報名</a>
      </li>
      <li class="tab">
        <a href="#" class="tab-text">講師介紹</a>
      </li>
      <li class="tab">
        <a href="#" class="tab-text">關於我們</a>
      </li>  
    </ul>
  </nav>
  <section class="content">
    <header>
      <a href="#" class="hamburger"><i class="fa fa-bars"></i></a>
    </header>
  </section>

CSS

html,body {
  background: #f1f1f1;
  height: 100%;
}
header {
  height: 50px;
  background: #50b599;
}
.hamburger {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  background: #2f705e;
  color: #50b599;
  margin: 5px;
  border-radius: 5px;
}
.content {
  min-height: 100%;
  background: #fff;
}
nav {
  width: 150px;
  position: absolute;
  top: 0;
  left: -150px;
}
ul {
  list-style: none;
}
li {
  padding: 5px;
}
.tab-text {
  text-decoration: none;
}

JS

$(document).ready(function() {
  var btn = $('.hamburger'),
      content = $('.content'),
      menu = $('nav');
  $('.hamburger').on('click', function(event) {
    event.preventDefault();
    content.toggleClass('open');
    if (content.hasClass('open')) {
      menu.stop().animate({
        left: 0
      }, 500);
      content.stop().animate({
        marginLeft: 150
      }, 500);
    } else {
      menu.stop().animate({
        left: -150
      }, 500);
      content.stop().animate({
        marginLeft: 0
      }, 500);
    }
  });
});

排版

版面的設置上是像第 13 天的文章，左欄固定、右欄變動的排版方式將 nav 固定寬度在左方，接著只要用絕對定位將 nav 選單移動到視窗外面就可以，打開選單時就是利用 animate 將選單移進視窗內。

重複使用的東西設定成變數節省資源

JS 程式碼的第 2, 3, 4 行都是設定變數，變數都是 jQuery Object ，因為每次在使用 jQuery 選取 DOM 時，都會需要搜尋整個 DOM，如果沒有設定成變數，就會每次操作到都會重新搜尋一次 DOM，無形中消耗許多資源。

.hasClass(<className>) 判斷畫面狀態

hasClass 可以偵測當下 DOM 有沒有該 class ，因此這個範例使用 toggleClass 來做到按一次選單就加上 open，再按一次就取消 open，並且搭配上 .hasClass('open') 來判斷當下選單的開啟狀態。

event.preventDefault()

點擊事件就有很多的 event 屬性，在範例中因為我們的按鈕是用超連結標籤 a 來製作，所以要防止點擊時發生超連結的預設 href 屬性。

另外還有許多 event

event.stopPropagation(), event.pageX, event.target