在小螢幕上，我們可以使用Javascript在最初時先隱藏導航欄，然後給使用者提供一個按鈕，通用點選該按鈕來顯示導航欄。
它節省了螢幕空間、對使用者來說比較直觀，同時可以在各種裝置上實現，並且那些不支援Javascript的裝置上也能很好地降級。
工具/原料
膝上型電腦或是桌上型電腦
網際網路
切換式選單
方法/步驟
步驟1 HTML結構
首先，在HTML檔案中華增加一個連結，該連結用來作為摺疊按鈕。你可以把這個連結放在導航列表的上面。
步驟2 用於切換的CSS程式碼
我們在CSS裡建立一些樣式規則來格式化摺疊按鈕，並隱藏它。
#nav-collapse{
display:none;
color:#fff;
text-align:right;
width:100%;
padding:.625em 0 .625em 0;
}
#nav-collapse.active{
display:block;
}
第1至7行程式碼為切換按鈕設定了一些基本樣式，並且會在一開始時隱藏選單。
記住，如果瀏覽器不支援Javascript，那麼將會顯示導航欄，在這種情況下按鈕也就沒有存在的必要了。
當”active”類被觸發時，第8至10行程式碼將通過Javascript來顯示按鈕。
在不支援的Javascript的瀏覽器中使用這些樣式時將不會有任何改變，這正是我們想要的。
即使瀏覽器不支援Javascript，導航將仍然是完全可用的，雖然效果不是很理想，但至少它是可用的。
步驟3 用於切換的Javascript程式碼
Javascript的部分並不不復雜，我們先建立一個名為index.js的檔案，並在HTML中的body閉合標籤前把它包含進來。
然後把下面的Javascript程式碼拷貝到index.js中去。
當頁面載入時（第1行程式碼），瀏覽器會自動執行上面的Javascript。第2至3行程式碼會分別獲取導航欄和切換程式碼，方便在後面指令碼中使用它們。
第5至12行程式碼建立了一個名為toggleClass的簡單函式，該函式會獲取一個元素，並檢查該元素是否有某個特定的類名。如果有就刪除，如果沒有就新增。
第13至14行為導航欄添加了一個hide類，並且為按鈕添加了一個active類。
最後，第15至18行程式碼定義了一個函式，並會在單擊切換按鈕時觸發。該函式能新增或刪除導航欄的hide類，這樣按鈕就可以控制導航選單的隱藏與顯示了。
現在這段程式碼會在所有裝置上執行，這顯然不是我們想要的，我們希望在導航選單摺疊的時候才執行這段程式碼。
雖然檢測螢幕寬度比較容易，但是這意味著斷點會被硬編碼到兩個位置：CSS檔案中和Javascript檔案中。
如果使用Javascript來檢查導航條目有沒有浮動，並基於此來執行程式碼，那我們就只需要在一個地方保持斷點了，這會使得之後維護斷點的工作更加方便。
當我們做這一修改時，可以隨便把classToggle函式也放到另外一個單獨的工具物件中去，外我們會在稍後再來建立這個完整的工具物件。
第8至11行程式碼會獲得導航條目，並檢查它有沒有浮動。第11行程式碼看起來也許會有點嚇人，但其實它只負責決定該獲得哪種樣式。IE瀏覽器有點特殊，如果使用者使用的是IE瀏覽器，我們就需要檢測不同的屬性。
在得到導航條目是否浮動了的訊息之後，你就可以命令剩下的Javascript只在導航條目浮動時才運行了。
有了這些樣式和指令碼，雖然當你在大螢幕裝置上重新整理頁面時不會看到任何改變，但是在小螢幕裝置上顯示時，頁面載入後你就會看到切換按鈕了，而且可以通過點選它來隱藏或顯示導航選單。
隨著切換功能的實現，現在的導航欄只有在訪問者需要它的時候才出現。
