在行動裝置蓬勃發展趨近於飽合的生活中,如何製作一個使用者體驗(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” 之間的切換,使用這個指令在我們點擊選單開關時就可以做到收合的效果,當然如果你只需要單一下拉或單一收合,你也可以個別使用指令
- 完成以上流程後,就完成簡單手機版選單的效果了