如何添加断点以滑动和推送响应菜单

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

您可以使用窗口调整大小功能。 下面是示例代码。 请注意，代码仅说明了这一想法。 您需要完成它才能使其按预期运行。

$(window).resize(function () {
    windowWidth = $(this).width();

    if (windowWidth >= 1224 ) {
        // push back the menu
    } 

}

Answer 2

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模块。