製作RWD網頁時，右上角的漢堡(hamburger)按鈕通常是按一下開啟選單，再按一下關閉選單，這個功能可以利用jQuery來製作就可以了。
先在html利用<div>建立一個按鈕
|
1 |
<div id="navBtn"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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部份主要是把按鈕實體化
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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’);
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('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'); } }); |
範例這裡下載
