響應式下的下拉菜單

原文：Convert a Menu to a Dropdown for Small Screens

譯文：轉換菜單爲下拉式來適應小屏幕

譯者：dwqs

Five Simple Steps （ps：稱FSS）網站有一個優雅的響應式設計的特色，當瀏覽器窗口的變小時，右上角的菜單從規則的一行轉換成一個下拉菜單。（PS：原文寫於2011年，FSS網站的設計已經改變，具體能夠參考原文的截圖。）

HTML

兩種菜單的HTML代碼是不一樣的，由於到目前爲止，你不能把<select>和<option>的樣式設計成<a>同樣的外觀和行爲，反之也不能。因此兩者都須要設計，而你作的就是把兩者的標記都寫出來。FSS的作法以下：

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 

  <select> 
    <option value="" selected="selected">Select</option> 

    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

繼續下一步

CSS

默認咱們利用display:none隱藏select菜單，這個很好接受。對於屏幕的閱讀者，將隱藏的多餘的菜單。

nav select{
   display:none;
}

而後利用媒體查詢，針對一些特定寬度的忽然變化。你能夠根據實際狀況來設計（標準斷點參考）

@media (max-width:960px){
     nav ul{display:none;}
     nav select{display:inline-block;}
 }

如今須要維護兩個菜單嗎？

恩，這是一個須要擔憂的問題。或許你的菜單是動態建立的而且你不能很好的控制的輸出，或許你有技術處理菜單但想確保不會偶然同步出現兩個菜單。能找到的一種方式是從一開始就動態建立下拉菜單。利用JQuery，很容易就能實現：

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

而後確保下拉菜單可以運用

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

下拉菜單是否是有點唐突？

有一點。小屏幕大多數是移動設備，而且他們對JavaScript的支持很友好，所以並不用太擔憂。可是若是你想確保在沒有JavaScript的狀況下也能讓它正常工做的話，能夠參考個人另外一篇文章：I have an article about that.

效果演示：http://jsfiddle.net/Web_Code/j810jta8/embedded/result/

打包下載：http://download.csdn.net/detail/u011043843/8257615

譯文首發：http://www.ido321.com/1348.html