Question

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

网站为www.clampdesign.com/dev/jsdd

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

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

Answer 1

当您使用导航栏时，您不进行切换，您必须使用高度和overflow: hidden，因此您必须使用高度执行动画而不使用display：none在切换动画结尾处进行隐藏

我在您的页面中看到的另一个问题是subnav search和social media <div class="clear"></div>在header-inner内的{{1}}防止飘过导航

更新：live example

Answer 2

我能够通过使用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();
    };
});

在刷新浏览器之前，无法看到响应式导航的更改

2 个答案: