Slide Over Menu 与 Bootstrap 相结合答案

【问题标题】：Slide Over Menu combined with BootstrapSlide Over Menu 与 Bootstrap 相结合
【发布时间】：2014-04-25 01:05:02
【问题描述】：

我正在尝试创建类似于此效果的东西，您可以在其中单击汉堡包图标并滑出一个菜单： 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/

但这并不完全正确。负边距技巧是因为我不确定如何从左侧引入菜单。我也不满意内容的右侧在菜单出现之前在动画中缩小，并且希望它同时发生。我的猜测是它们在技术上是同时发生的，但是边距动画比宽度动画需要更长的时间才能完成。

任何帮助将不胜感激。让我知道是否可以帮助澄清任何事情。

【问题讨论】：

我认为如果右 div 从右向左“缩小”而不是反之亦然，这可能会有所帮助。与此示例类似：stackoverflow.com/questions/9667143/…

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

这看起来是个不错的起点：

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

请注意“推送”和“滑动”类型菜单之间的区别。我在寻找“推动”。

这里解释的代码： http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

【讨论】：