滑过菜单与引导

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/