引入文件

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

添加标签

  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>

启动此插件

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

调整参数

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

可调用的方法

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

Responsive Nav的更多相关文章

  1. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  2. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  3. Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  4. Bootstrap相关优质项目推荐

    Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...

  5. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  6. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  7. Bootstrap相关优质项目必备网址

    1:文档全集:这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史.Bootstrap本身就是一个传奇,而这些文档就是传奇的见证! 官方网址:http://docs.bootcss.c ...

  8. [转]Build beautiful, responsive sites with Bootstrap and ASP.NET Core

    本文转自:https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap?view=aspnetcore-2.1 Bootstra ...

  9. trigger() --工作中问题nav样式

    自动执行某元素的某个事件 $("#div").trigger("click");  //让系统自动执行单击事件 适用于nav样式中,下面横线绝对定位于nav.o ...

随机推荐

  1. 比较spring cloud和dubbo，各自的优缺点是什么

    dubbo由于是二进制的传输,占用带宽会更少springCloud是http协议传输,带宽会比较多,同时使用http协议一般会使用JSON报文,消耗会更大 dubbo的开发难度较大,原因是dubbo的 ...

  2. POJ 1276 Cash Machine 【DP】

    多重背包的模型,但一开始直接将N个物品一个一个拆,拆成01背包竟然T了!!好吧OI过后多久没看过背包问题了,翻出背包九讲看下才发现还有二进制优化一说........就是将n个物品拆成系数:1,2,4, ...

  3. BZOJ3027 - [CEOI2004]Sweet

    Portal Description 给出\(n(n\leq10),a,b(a,b\leq10^7)\)与\(\{c_n\}(c_i\leq10^6)\),求使得\(\sum_{i=1}^n x_i ...

  4. MYSQL常见运算符和函数【重要】

    字符函数 (1)CONCAT():字符连接 SELECT CONCAT(‘IMOOC’,’-‘,’MySQL’);//IMOOC-MySQL SELECT CONCAT (first_name,las ...

  5. linux shell if语句使用方法 [转载]

    最精简的 if 命令的语法是: if TEST-COMMANDS; then CONSEQUENT-COMMANDS; fi TEST-COMMAND 执行后且它的返回状态是0,那么 CONSEQUE ...

  6. equals() 和 hashCode()

    equals() 和 hashCode()这两个方法在java.lang.Object中,所有的类都可以继承这两个方法: 但是,这两个方法在Object类中的实现一般没什么用,所以你通常需要自己重载这 ...

  7. HDU 6441 费马大定理+勾股数

    #include <bits/stdc++.h> #define pb push_back #define mp make_pair #define fi first #define se ...

  8. React学习及实例开发（一）——开始

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.构建一个新项目 1.命令行运行如下命令,构建一个新的react项目 npm install -g crea ...

  9. flash update

    https://get.adobe.com/cn/flashplayer/otherversions/

  10. eclipse提速03 - 禁用动画