滑過菜單與引導

Question

我試圖創建一個類似於這種效果，在那裏你可以點擊圖標漢堡包結合的東西和菜單滑出： http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/

我不需要懸停事件，只是點擊。

我的問題是，在上面的例子中，已經存在分配給菜單的空間。在我的情況下，我需要我的主要內容縮小以爲菜單騰出空間。所以，使用Bootstrap，我將我的主要內容從「col-md-12」類切換到「col-md-11」類，這樣我的「col-md-1」類菜單就可以適用：

$('#toggle').mousedown(function() { 
    $('#mainMenu').toggleClass('col-md-1'); 
    $('#mainMenu').toggleClass('zero'); 
    $('#mainContent').toggleClass('col-md-12'); 
    $('#mainContent').toggleClass('col-md-11'); 
}); 

我曾嘗試一些東西在這裏： http://jsfiddle.net/955RV/

但是，這並不完全正確。負邊際技巧是因爲我不確定從左邊進入菜單的其他方式。在菜單出現之前，我也不滿意動畫內容縮小的右側，並且希望它同時發生。我的猜測是，它們在技術上同時發生，但邊距動畫比寬度動畫需要更長的時間才能完成。

任何幫助，將不勝感激。讓我知道我是否可以幫助澄清任何事情。

Answer 1

這看起來像一個偉大的地方開始：

http://tympanus.net/Blueprints/SlidePushMenus/

通知「推」和「幻燈片」式菜單之間的差異。我正在尋找「推」。

代碼解釋這裏： http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/