这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
响应式导航开发:一个简单的JavaScript响应导航插件
2013年06月26日 JavaScript ⁄ 共 1559字 等你评论

翻译:HighSea

有N种方法可以开发响应式导航,通常我们需要的是非常简单的解决方案。但尽管表观简单,却有许多潜在的因素。下面做更一个简单的解决方案:想通过实施得当,不添加更复杂的用户界面,甚至更好。

我遇到同时建立响应导航的问题之一是目前的浏览器不支持CSS3过渡到一个高度自动定义大多数的时候,我们不应该使用固定高度,因为菜单项的高度可能无法在所有的浏览器相同,项目的数量可能会有所改变。我建立的页面也总是尽量减轻重量,所以我一直在想一个解决方案,不需要一个类库,如jQuery框架。javascript响应式导航

今天,我很高兴向大家介绍这个响应式导航,免费和开源的JavaScript插件,解决了这些问题,并在一个很小的封装。它的MIT许可证下发布的,所以你可以用它在所有项目中,自由和不受任何限制。它的解决方案也不是一刀切。但对于那些正在寻找一个解决方案,想很好地做这件事的人,这绝对是一个不错的选择。

 

特点

响应导航是一个微小的JavaScript插件,它的大小只有1.6 KB缩小的gzip压缩,并帮助您创建一个为小屏幕切换的导航。它采用触摸事件和CSS3过渡尽可能最佳的性能。它还包含一个“聪明”的解决方法,使得它可以从高度过渡:0高度:自动,这是一种非常的CSS3过渡。

  • 很简单,语义标记。
  • 大小只有1.6 KB缩小的gzip压缩。
  • 不需要任何外部库。
  • 使用CSS3过渡和触摸事件。
  • 删除300毫秒延迟之间的物理自来水和click事件。使得它可以使用CSS3过渡
  • 高度:自动
  • 内置与无障碍,这意味着一切正常屏幕阅读器和禁用了javascript脚本的浏览器都支持。
  • 项目兼容所有主要桌面和移动浏览器,包括IE 6。
  • 在MIT许可下免费使用。

example-opt

如何运作?

响应式导航插件:TinyNav.js 这是在2011年发布的,尽管TinyNav有繁忙的工作,但是他还是完成一个具有普通的导航选择功能的菜单,还有隐藏显示切换按钮。响应式导航并没有从根本上改变的文件在所有的HTML结构,所以它在这个意义上说,一个更简单的解决方案。

响应式导航计算所需的最大高度,以适应所有的菜单项的背景的作品。当用户点击导航切换插件使用CSS3过渡转型,从一个高度设置为0到最大高度前面计算。响应式导航也重视一个 touchstart 事件监听器的切换,这使得它可以删除默认的300毫秒的延时使用点击事件发生时。

为什么选择这超过另一种解决方案呢?

响应式导航是轻量级的,不依赖于任何外部库。立即打开 touchstart 导航-在触摸设备上没有更多的300毫秒的延迟。这也是(据我所知)唯一的响应导航插件使用CSS3过渡且可变高度(如果我错了,尽管纠正我)。响应式导航还内置与无障碍心态,这意味着一切正常屏幕阅读器禁用了JavaScript,它还是能正常的开启。最后,反应灵敏的响应式导航已测试IE6 +移动和桌面浏览器上,这样就免得担心浏览器支持。测试平台的完整列表:

  • iOS 4.2.1+
  • Android 1.6+
  • Windows Phone 7.5 & 7.8
  • Blackberry 7.0+
  • Blackberry Tablet 2.0+
  • Kindle 3.3+
  • Maemo 5.0+
  • Meego 1.2+
  • Symbian 3
  • Symbian Belle
  • Symbian S40 Asha
  • webOS 2.0+
  • Windows XP
  • Windows 7
  • Mac OS X

演示和下载

导航演示:http://responsive-nav.com/  

Github地址:https://github.com/viljamis/responsive-nav.js

下载请猛击这里

原文地址:http://coding.smashingmagazine.com/2013/04/09/javascript-plugin-for-responsive-navigation/

 

友荐云推荐
×