如何将断点添加到幻灯片和推送响应菜单

Question

我的响应式网站上有两个菜单。浏览器宽度大于 1024px 时的水平菜单和浏览器窗口小于 1024px 时的滑动和推送（右）菜单（我正在使用找到的滑动推送菜单：http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/）。

如果浏览器窗口小于 1024px 并且我单击切换按钮，菜单工作正常，但在菜单打开的情况下，当我展开大于 1024px 的浏览器窗口时，滑动和推送菜单仍然打开，我的水平菜单现在也显示。我的问题是，使用 javascript，一旦我的浏览器窗口达到 1024px 或更高，我如何收回或推回菜单。

这是工作文件的链接 http://tinyurl.com/qxp7gjn

这是我菜单的javascript：

var menuRight = document.getElementById('cbp-spmenu-s2'),
    showRightPush = document.getElementById('showRightPush'),
    body = document.body;
showRightPush.onclick = function () {
    classie.toggle(this, 'active');
    classie.toggle(body, 'cbp-spmenu-push-toleft');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    disableOther('showRightPush');
};
$(window).resize(function () {
    // Window width with legacy browsers.
    windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (windowWidth > 800) {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuRight, 'cbp-spmenu-close');
        disableOther('showRightPush');
    }
});
function disableOther(button) {
    if (button !== 'showRightPush') {
        classie.toggle(showRightPush, 'disabled');
    }
}

Answer 1

Subash 走在正确的道路上，但这是一个更高性能的版本，也支持旧版浏览器：

$(window).resize(function() {
  // Window width with legacy browsers.
  windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
  if (windowWidth > 1023) {
    // Do opposite of showRightPush.onclick.
  }
});

速度比较：http://jsperf.com/jq-width-vs-client-width/5

（无耻的插头）查看响应式菜单示例。

我真的很喜欢这种风格，codrops有很棒的东西。 我要将其添加到 RM 模块中。

Answer 2

您可以使用窗口大小调整功能来执行此操作。下面是示例代码。请注意，代码仅演示了这个想法。您需要完成它才能使其按预期工作。

$(window).resize(function () {
    windowWidth = $(this).width();
    if (windowWidth >= 1224 ) {
        // push back the menu
    } 

}