Javascript 滑动菜单与引导相结合

我正在尝试创建类似的效果，您可以单击汉堡包图标，然后从菜单中滑出：

我不需要悬停事件，只需要单击

我的问题是，在上面的示例中，已经为菜单分配了活动空间。在我的情况下，我需要缩小我的主要内容来为菜单腾出空间。因此，使用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');
});

我在这里做了一些尝试：

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

---

任何帮助都将不胜感激。如果我能帮忙澄清任何事情，请告诉我。

这看起来是一个很好的起点：

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

此处解释的代码：

---

我认为如果右div从右向左“收缩”，而不是从右向左“收缩”，可能会有所帮助。与此示例类似：