來源：w3cplus
為了讓Web頁面在手機上顯示流暢，現在國外很多網站都使用Responsive設計和CSS3 Media Queries的結合來實現。這樣的例項到處可見，那麼今天我想和大家一起學習的是有關於這種方法實現手機佈局中的導航製作。
如果你的導航選項比較多，放到手機上來瀏覽就會擠到一起，造成美觀性的不足。下面為了解決這樣的問題，我們就一起跟隨Nick La寫的教程《Mobile Navigation Design & Tutorial》學習如何使用jQuery來解決剛才所說的問題。
問題的描述
下面的截圖說明了導航佈局在手機上的問題。如果你的導航只有三到四個選項，如Web Designer Wall網站，導航剛好一行能顯示，但當你的導航選項包含更多時，其實的選項就會被擠壓下去，比如說Bitfoundry網站。下面可以看看他們對比的截圖：
解決方法
Nick La在教程中羅列了幾種相關的解決方法:
1、下拉選擇
這種方法是將所有的導航選項放到一個下拉選擇控制（select）中，但這種方法並不是很好，因為select的樣式要製作到讓各瀏覽器下完全一致是非常的麻煩。除非你使用jQuery的外掛，比如說Chosen外掛能幫你實現select的樣式美化，否則的話你只好採用select的預設樣式風格。這也將導致使用者的體驗不一樣，在桌面系統下是連結標籤，而在手機上卻是下拉選擇框。如果你喜歡這種解決方式，你可以仔細閱讀CSS-Tricks寫的Convert a Menu to a Dropdown for Small Screens一文。也可以參考下面的網站
2、顯示成塊狀
第二種方法是將所有導航通過”display:block”，並將float去掉，將每個導航項設定成一個塊項,這是一種快速的解決方法，不過同時也帶來一個不足之處，給頭部帶來很大的空間，本來手機螢幕空間就小，這樣一來，整個螢幕或許只能看到你的導航選項了。這樣導致使用者體驗就差，需要滾動到底部才能看到頁面的主內容。比如說下面的幾個案例。
3、選單圖示
最後一種解決方法是使用選單圖示名選單按鈕。這種效果是藉助jquery來實現的。在頁面截入時，顯示一個選單的圖示或按鈕，而導航選項是隱藏的，當你點選這個圖示時導航選項將顯示出來，再次點選時這們導航選項將隱藏。這種方法將是最適合的一種方法，完全可以通過css來實現，如果你還需要相容ie的話，那這種功能你就在考慮配合jQ來完成，下面列出幾個案例，供大家參考：
在眾多按例中，我比較喜歡bootstrap的，大家感興趣可以去看看bootstrap的api。
jQuery製作手機導航
上面給大家展示了三種不同的方法實現手機導航效果，下面我們來看看如何使用jQuery實現上面介紹的第三種方法。
方法很簡單，使用jQuery的prepend方法在導航中插入一個選單按鈕，然後給這個按鈕繫結一個click事件，點選實現顯示/隱藏效果，具體方法如下：
HTML Markup
|
1 2 3 4 5 6 |
< nav id="nav-wrap"> < ul id="nav"> < li>< a href="#">Button< /a>< /li> < li>< a href="#">Button< /a>< /li> < /ul> < /nav> |
上面結構是一個製作導航選單的模板，極其的常見，在些不做過多描述。
jQuery Code
使用jQuery的prepend方法，將“<div id=”menu-icon”>”插入到“<nav id=”nav-wrap”>”前面，並在“div#menu-icon”上繫結一個click事件，實現導航的顯示/隱藏功能
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function($){ /* prepend menu icon */ $('#nav-wrap').prepend('< div id="menu-icon">Menu< /div>'); /* toggle nav */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); |
此時導航的HTML Markup並變成下面這樣：
|
1 2 3 4 5 6 7 |
< nav id="nav-wrap"> < div id="menu-icon">Menu< /div> < ul id="nav"> < li>< a href="#">Button< /a>< /li> < li>< a href="#">Button< /a>< /li> < /ul> < /nav> |
CSS Code
結構有了，功能也有了，但還需要CSS來美化，那麼有關於CSS詳細的程式碼在此就不做過多得的羅列，此處只給大家介紹幾個關鍵部分。
首先在樣式中將“div#menu-icon”隱藏起來（display:none），然後通過CSS3 Media Queries來重置div#menu-icon樣式。換句話說當顯屏寬度小於600px時，將div#menu-icon重設定為顯示(display:block)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@media screen and (max-width:600px){ #menu-icon { color: #000; width: 42px; height: 30px; background: url(images/menu-icon.png) no-repeat left center; padding: 8px 10px 42px; cursor: pointer; border: 1px solid #666; display: block;/*顯示div#menu-icon*/ } #nav { clear: both; position: absolute; top: 38px; width: 160px; z-index: 10000; padding: 5px; background: #f8f8f8; border: 1px solid #999; display: none;/*預設隱藏，通過jq實現顯示隱藏切換*/ } } |
通過CSS3 Media Queries在手機瀏覽器上，將#nav設定為隱藏，這樣主要實現實初截入時隱藏導航，然後通過上面寫的jq來實現，點選“div#menu-icon”圖示時，顯示導航選單項，在點選時就隱藏導航選單項。如圖所示：
DEMO效果
上面DEMO是Nick La給大家寫的一個效果，感興趣的話可以看看，不過記得使用iPhone檢視，不然就看不到下圖的效果：
那麼有關於手機上導航製作方法就介紹完了，上面方法各有所長，就像Nick La介紹的一樣，最後取決需要大家自己根據需求去定奪，此文僅供參考，希望大家喜歡，如果您覺得對你有所幫助，請將此文傳送給你的朋友，如果你還有更好的建議也可以在下面的評論中與我們一起分享您的經驗。最後再次感謝Nick La給我們帶來這麼好的教程。