响应式导航插件Responsive Nav|511遇见强烈推荐

特色

    压缩后仅1.7 KB。
    不依赖任何第三方工具库。
    支持CSS3过渡(transitions)效果、触屏事件,并且只需要很简单的HTML代码结构。
    移除了物理触屏事件和系统点击事件之间的300ms延时。
    可以将CSS3过渡(transitions)效果与height: auto一同使用。
    从设计此插件之初就将可访问性考虑在内,它能支持屏幕阅读器,并且能在禁用JavaScript的浏览器上工作。
    可以在所有主流桌面、移动设备浏览器上工作,包括IE6+。

使用指南

按照下面的步骤即可引入此插件并让其顺利的运行。如果在使用过程中发现bug,请提交到GitHub issues.
1、引入文件

  1. <!-- 引入这些文件至 <head>-->
  2. <link rel="stylesheet" href="responsive-nav.css">
  3. <script src="responsive-nav.js"></script>

2、添加标签

  1. <div id="nav">
  2.   <ul>
  3.     <li><a href="#">Home</a></li>
  4.     <li><a href="#">About</a></li>
  5.     <li><a href="#">Projects</a></li>
  6.     <li><a href="#">Contact</a></li>
  7.   </ul>
  8. </div>

3、启动此插件

  1. <!-- 将下面这段代码放置在 </body> 之前 -->
  2. <script>
  3.   var navigation = responsiveNav("#nav");
  4. </script>

4、调整参数

  1. var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
  2.   animate: true, // Boolean: 是否启动CSS过渡效果(transitions), true 或 false
  3.   transition: 400, // Integer: 过渡效果的执行速度,以毫秒(millisecond)为单位
  4.   label: "Menu", // String: Label for the navigation toggle
  5.   insert: "after", // String: Insert the toggle before or after the navigation
  6.   customToggle: "", // Selector: Specify the ID of a custom toggle
  7.   openPos: "relative", // String: Position of the opened nav, relative or static
  8.   jsClass: "js", // String: 'JS enabled' class which is added to <html> el
  9.   debug: false, // Boolean: Log debug messages to console, true 或 false
  10.   init: function(){}, // Function: Init callback
  11.   open: function(){}, // Function: Open callback
  12.   close: function(){} // Function: Close callback
  13. });

5、可调用的方法

  1. // 销毁插件
  2. navigation.destroy();
  3. // Toggle
  4. navigation.toggle();

下载预览

1、VIEW SOURCE ON GITHUB
2、在线查看预览效果 响应式导航插件Responsive Nav
3、 百度网盘下载


发布日期:

所属分类: JavaScript/jquery, 前端 标签: