Question

我正在尝试创建一些类似于Boostrap's的响应式导航，但我遇到了一些问题。这就是我现在所拥有的：http://jsfiddle.net/apautler/eqAZz/。在示例中可能很难说，但是当您使用屏幕从小到大时，导航会消失。我知道这是因为jQuery正在检查屏幕大小是否在加载时低于992px。如果是，它隐藏了导航。然后，当您放大页面时，导航仍然是隐藏的。当页面调整大小时，我需要以某种方式重新评估它。我认为有一个jQuery resize（）函数，但这似乎不起作用。有什么想法吗？

如果有更好的方法可以完全构建它，我也愿意重新开始。谢谢你的帮助！

Answer 1

使用CSS3 Media queries会更容易。

@media all and (max-width:500px) { 
     .navigation {display:none;}
}

Answer 2

试试这个：

http://jsfiddle.net/will/eqAZz/2/embedded/result/

我不确定为什么你不能让它发挥作用。在JS小提琴中，你必须看一下全屏版本。

那就是说，你应该使用CSS来研究媒体查询。 http://www.w3.org/TR/css3-mediaqueries/

不需要javascript！

希望有所帮助：）

Answer 3

$(window).resize(function(){
if ($(window).width() < 992) {
$('#nav-primary').hide();
}
else {
$('#nav-primary').show();
}
});

作品

Answer 4

这是一个基本的窗口调整大小处理程序

$(window).resize(function(){
    var hideShow=($(window).width() < 992 ) ? 'hide' :'show';
    $('#nav')[hideShow]();
})

Answer 5

试用本教程，链接：http://hightechnology.in/how-to-create-responsive-menu-2/

演示是他们的，你也可以下载代码。

响应式导航

5 个答案: