在行動裝置蓬勃發展趨近於飽合的生活中，如何製作一個使用者體驗(UX)良好的手機版(行動版)選單就變的很重要。
雖然我們在做的是”網站”而不是”APP”，但以我自己的觀念來說，我認為網站在手機上瀏覽時的功能選單，就應該盡量做的跟APP一樣流暢，這樣才能提升使用者體驗度，而不要有用起來卡卡的感覺，目前我也一直朝這方面努力！
這篇文章會介紹手機版選單的基本做法，包括了一些基本架構以及 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>
- 手機版選單(行動版選單)基本的構成條件有兩個，一個就是 “選單開關”，我們建立樣式名稱為 “toggle” 的 a 標籤來使用；另一個則是 “選單列表”，我們建立一個樣式名為 “wrap” 的 UL LI 來建立選單列表的內容，最外層為了範例方便我們使用一個 div 來包覆元件，命名為 “mobile”
- 實際上選單開關及選單列表不一定會放置在頁面的同一個區塊中，視你的版面而定。
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;
}
- 在 CSS 的部份，最重要的地方在選單列表的定位，如果你使用 “absolute” 來定位的話，展開的選單將會覆蓋在頁面內容上，如果你使用靜態的定位像是 “relative、static”，展開的選單會視選單所在的位置向下把內容推擠開來，在範例我們使用 “absolute” 的方式來製作
- 通常為了節省版面，行動版選單在一開始通常是隱藏的，頁面主內容會是我們首要閱讀的部份，如果需要操作換頁再點擊選單開關去開啟選單列表即可，所以一開始我們預設選單列表 “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>
- 首先可以先到 jQuery 官方網站去下載適用的版本來 include。
- 我們要呈現的功能是點擊選單開關後，讓選單列表下拉展開(收合)
- code line 4~6，我們先取得使用的物件命名方便操作
- code line 8~10，將選單開關建立 “點擊 click” 的動作
- code line 9，點擊選單開關後，選單列表會執行 “slideToggle” 指令，這個指令代表著是 “slideDown、slideUp” 之間的切換，使用這個指令在我們點擊選單開關時就可以做到收合的效果，當然如果你只需要單一下拉或單一收合，你也可以個別使用指令
- 完成以上流程後，就完成簡單手機版選單的效果了