自适应导航菜单调整大小?

时间:2013-06-24 21:42:45

标签: javascript jquery navigation responsive-design

我正在尝试构建一个非常简单的响应式导航菜单。我在这里遇到了一些问题。

  1. 当我调整宽度等于或小于768px的窗口时,响应式菜单 不管用。
  2. 当我以低于或等于的窗口宽度刷新页面时     768px,响应式导航工作...但是,如果我调整大小甚至     一个像素,响应式导航显示再次隐藏。
  3. 我在这里创建了一个CodePen:http://codepen.io/anon/pen/fHsti

    非常感谢你的帮助!

2 个答案:

答案 0 :(得分:2)

更改此代码。在事件处理程序中需要if语句,否则只有在窗口宽度小于768px时才绑定事件。

jQuery("nav p.active").on("click", function(){
  if (jQuery(window).width() <= 768) {
    jQuery("nav ul").toggle("fast");
  }
});

http://codepen.io/anon/pen/BHbon

答案 1 :(得分:2)

老实说,解决此问题的最佳方法是仅使用JS来管理媒体查询之间的导航状态,其他所有内容都应隐藏在媒体查询中。像MediaCheckmatchMedia这样的东西是将媒体查询和JS结合在一起的好方法。

created a simple demo使用您的标记,我认为我得到了您正在寻找的功能。我使用mediaCheck来清除768px主断点之间任何JS强加的内联样式。