0

我的页面顶部有一个标准的水平导航菜单。为了使其具有响应性，我在小于 908 像素的屏幕尺寸上将布局更改为垂直，并使用 JQuery 的切换功能在小屏幕上通过按一点“菜单”按钮来显示/隐藏水平菜单。它在任何地方都很好用，除非我在切换关闭时手动调整浏览器窗口的大小，导航变为水平但不会取消隐藏。菜单栏仍设置为display:none。

该网站是www.clampdesign.com/dev/jsdd

这是我正在使用的 jQuery 代码：

    jQuery('a.btn-navbar').click(function() {
    jQuery('.nav-collapse').toggle('slow', function() { 
        });
    });
4

2 回答 2

0

我可以通过使用 jQuery resize 函数来检查窗口是大于还是小于 980px 并以这种方式更改导航的显示来完成这项工作。在我的测试中，这似乎工作正常，但我不确定这是否是最好的方法。我很乐意听到替代方法，或者如果您发现我这样做的方式有任何问题。以下是我对代码所做的更改：

    // Toggle "Menu" link to open/close navigation on smaller screens
jQuery('a.btn-navbar').click(function() {
jQuery('.nav-collapse').slideToggle('slow', function() {
    });
}); 

// Check the size of the window, and adjust the visibility of the vertical menu accordingly.
jQuery(window).resize(function() {
    var viewportWidth = jQuery(window).width();
    if (viewportWidth > 980) {
        jQuery('.nav-collapse').show();
    };
    if (viewportWidth < 980) {
        jQuery('.nav-collapse').hide();
    };
});
于 2013-09-13T18:25:16.873 回答
0

当您使用导航栏时，您不会切换，您必须使用高度和overflow: hidden，因此您必须在切换动画结束时使用 display:none 隐藏高度而不隐藏动画。

我在您的页面中看到的另一个问题subnav是在哪里，search并且social media您需要<div class="clear"></div>在其中结束header-inner以防止浮动在导航上

更新：现场示例

于 2013-09-13T17:20:59.643 回答