javascript - CSS - 移动菜单触发器

Question

我正在为响应式网站构建菜单 - 我的问题是人们认为什么是显示/隐藏菜单的最佳解决方案。

我已经在这个 jsfiddle 中设置了菜单 - http://jsfiddle.net/paul_dance/5z7rvvn4/2/

菜单隐藏在 768px 处并显示一个按钮 - 我正在考虑添加一个简单的 js 脚本

$('.menu-btn).click(function(){
  $('nav ul').slidetoggle();

});

或类似的..

它会在点击时切换菜单 - 但我担心如果用户再次隐藏它然后将他们的屏幕扩展到 768 以上，菜单将保持隐藏状态并且没有按钮可以重新显示。

是否有更好的跨浏览器/设备解决方案可用？或者只有 CSS 的解决方案？这也需要在 IE8 上工作。

Answer 1

不使用 slideToggle，只需在 #nav 元素上切换一个 open 类。然后在你的“移动”大小的媒体查询中，让 #nav.open 显示菜单(我通过将 #nav.open > ul 设置为 display 来做到这一点: block ;).

例子:

http://jsfiddle.net/rally25rs/5z7rvvn4/3/

该示例不是动画，但您可以在高度上添加 CSS3 过渡，而不仅仅是更改元素的 display:none;。 CSS3 转换在 IE 8 或 9 中不起作用，菜单只会出现，但没有移动设备运行 IE8 或 9，所以这真的不应该成为问题。