在行動裝置蓬勃發展趨近於飽合的生活中,如何製作一個使用者體驗(UX)良好的手機版(行動版)選單就變的很重要。
雖然我們在做的是”網站”而不是”APP”,但以我自己的觀念來說,我認為網站在手機上瀏覽時的功能選單,就應該盡量做的跟APP一樣流暢,這樣才能提升使用者體驗度,而不要有用起來卡卡的感覺,目前我也一直朝這方面努力!

jQuery手機版選單製作【簡易下拉展開式】

這篇文章會介紹手機版選單的基本做法,包括了一些基本架構以及 jQuery 操作,之後再以這篇文章的內容來做其他延伸教學。
你也可以網路上找到許多 jQuery 選單套件來使用,但如果你學會選單製作的原理,就可以自己應用變化,做出符合你心中設計的選單,滿足客戶搞怪的需求,以下請跟著教學範例來學習吧。

HTML
<div id="mobile">
  <a class="toggle">MENU</a>
  <ul class="wrap">
    <li><a href="#">HOME</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SERVICE</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>
  1. 手機版選單(行動版選單)基本的構成條件有兩個,一個就是 “選單開關”,我們建立樣式名稱為 “toggle” 的 a 標籤來使用;另一個則是 “選單列表”,我們建立一個樣式名為 “wrap” 的 UL LI 來建立選單列表的內容,最外層為了範例方便我們使用一個 div 來包覆元件,命名為 “mobile”
  2. 實際上選單開關選單列表不一定會放置在頁面的同一個區塊中,視你的版面而定。
CSS
body {
	background: #2c2f38;
}
#mobile {
	position: relative;
	font-family: Helvetica;
}
#mobile .toggle {
	display: block;
	background: #1bbc9b;
	padding: 10px;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
#mobile .wrap {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	width: 100%;
	background: #FFF;
}
#mobile .wrap li {
	border-bottom: 1px solid #f1f1f1;
}
#mobile .wrap li a {
	display: block;
	padding: 15px;
	font-size: 14px;
	color: #666;
}
  1. 在 CSS 的部份,最重要的地方在選單列表的定位,如果你使用 “absolute” 來定位的話,展開的選單將會覆蓋在頁面內容上,如果你使用靜態的定位像是 “relative、static”,展開的選單會視選單所在的位置向下把內容推擠開來,在範例我們使用 “absolute” 的方式來製作
  2. 通常為了節省版面,行動版選單在一開始通常是隱藏的,頁面主內容會是我們首要閱讀的部份,如果需要操作換頁再點擊選單開關去開啟選單列表即可,所以一開始我們預設選單列表 “display:none” 隱藏起來
JS
 
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
	var $mobile = $('#mobile') ,
		$toggle = $mobile.find('.toggle') ,
		$menu = $mobile.find('.wrap');
	
	$toggle.click(function(e) {
        $menu.slideToggle()
    });
});
</script>
  1. 首先可以先到 jQuery 官方網站去下載適用的版本來 include。
  2. 我們要呈現的功能是點擊選單開關後,讓選單列表下拉展開(收合)
  3. code line 4~6,我們先取得使用的物件命名方便操作
  4. code line 8~10,將選單開關建立 “點擊 click” 的動作
  5. code line 9,點擊選單開關後,選單列表會執行 “slideToggle” 指令,這個指令代表著是 “slideDown、slideUp” 之間的切換,使用這個指令在我們點擊選單開關時就可以做到收合的效果,當然如果你只需要單一下拉或單一收合,你也可以個別使用指令
  6. 完成以上流程後,就完成簡單手機版選單的效果了

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料