製作RWD網頁時，右上角的漢堡(hamburger)按鈕通常是按一下開啟選單，再按一下關閉選單，這個功能可以利用jQuery來製作就可以了。

先在html利用<div>建立一個按鈕

<div id="navBtn"></div>

<nav>
<div id="navBtn"></div>
<ul>
  <li class="m5"><a href="#">最新消息</a></li>
  <li class="m3"><a href="#">健康知識庫</a></li>
  <li class="m2"><a href="#">博物館</a></li>
  <li class="m12"><a href="#">會員專區</a></li>
  <li class="m11"><a href="#">菁英招募</a></li>
  <li class="m13"><a href="#">站內搜尋</a></li>
</ul>
</nav>

CSS部份主要是把按鈕實體化

nav#mobile #navBtn {
	width: 40px;
	height: 40px;
	background: url(image/icon_50x50.png) no-repeat;
	background-size: cover;
	background-color: #DB596C;
	border-radius: 50%;
	float: right;
	margin: 10px;
	position: fixed;
	right: 0;
}

js利用.hasClass();函式來辨識按鈕的狀態
先自訂一個要用來判斷的條件，這裡用的條件是：
判斷按鈕有沒有套用navOpen類別(class)
判斷成立：(選單為開啟狀態)關閉選單，按鈕移除navOpen類別(class)
判斷失敗：(選單為關閉狀態)開啟選單，按鈕套用navOpen類別(class)
 
接下來實際用if判斷式來進行：
if(按鈕.hasClass(‘navOpen’)){
關閉nav(範例用animate();動態函式)
按鈕.removeClass();
}else{
開啟nav
按鈕.addClass(‘navOpen’);
}

$('nav#mobile #navBtn').click(function () {
    if ($('nav#mobile #navBtn').hasClass('navOpen')) {
        $('nav#mobile ul').animate({
            'left' : '-100%'
        }, 1000);
        $('nav#mobile #navBtn').removeClass();
    } else {
        $('nav#mobile ul').animate({
            'left' : '0px'
        }, 1000);
        $('nav#mobile #navBtn').addClass('navOpen');
    }
});

範例這裡下載