Question

我正在尝试创建类似于此效果的内容，您可以点击汉堡图标并滑出一个菜单： http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/

我不需要悬停事件，只需点击即可。

我的问题是，在上面的示例中，已经为菜单分配了空间。在我的情况下，我需要缩小主要内容以便为菜单腾出空间。所以，使用Bootstrap，我将我的主要内容从＆＃34; col-md-12＆＃34;上课到＃34; col-md-11＆＃34;类，所以我的菜单用＆＃34; col-md-1＆＃34;班级可以适合：

$('#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/

滑动菜单与Bootstrap结合使用

1 个答案: