左側切換菜單，如在Facebook中

我相信大家都會看到，facebook移動應用程序。也在很多平面UI模式網站上。左側切換菜單，如在Facebook中

我想做一個這樣的左菜單。

這就是我現在所做的。

隱藏菜單開始（display:none）
上的菜單按鈕的點擊。顯示在左邊的菜單（toogle），並使用JavaScript增加主要內容的左邊距（style,maregin-left:100px;）

這是工作正常，但我只是想知道，這是最好的做法，而將這種反應？

如果您向我們展示一些代碼，但至少從您所描述的內容中可以得到更多幫助，這對於響應式設計（隱藏事物，使用JavaScript動態地更改邊距等）非常典型。 – aug

你正在做的是好的，但最佳實踐，我將使用CSS3與變換翻譯一些這樣的事

.menu{ -webkit-transform:translateX(-200px)

從那裏你可以從jQuery的使用toggleClass（「活動」）

.menu.active{-webkit-transfrom:translateX(0)}

希望對您有所幫助！

2013-07-21 09:05:20

是的，這是一個非常好的方法，它應該具有響應性，因爲它只佔用100px的寬度。如果是全屏水平下拉菜單，那麼你必須確保它的內容是響應式的，但是對於任何分辨率，100px寬的垂直菜單都會很好（尤其是如果用戶可以選擇將其切換爲打開或關閉）。

2013-07-21 07:31:09 AgmLauncher

設計模式被稱爲「畫布外」佈局。

根據您可能不希望在大屏幕上隱藏的內容的性質，取決於您的要求。

有什麼我的意思是一個很好的例子：http://jasonweaver.name/lab/offcanvas/

當導航全屏幕上是可見的和隱藏在更小的移動視口。

2013-07-21 07:38:35 j00lz

模式名稱爲+1。有沒有一個正確的方法來實現？ – madhairsilence

不正確的方式，因爲這種模式的缺點。如果它是一個導航菜單，並且它默認情況下隱藏（而不是在頁面加載時），則舊版技術上的用戶可能無法訪問它。想象*漸進式增強* – j00lz

回答