引入文件

<!-- 引入这些文件至 <head> 中 -->

<link rel="stylesheet" href="responsive-nav.css">

<script src="responsive-nav.js"></script>

添加标签

<div id="nav">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Projects</a></li>

    <li><a href="#">Contact</a></li>

  </ul>

</div>

启动此插件

<!-- 将下面这段代码放置在 </body> 之前 -->

<script>

  var navigation = responsiveNav("#nav");

</script>

调整参数

var navigation = responsiveNav("#nav", {

 // Selector: The ID of the wrapper

  animate: true, // Boolean: 是否启动CSS过渡效果（transitions）， true 或 false

  transition: 400, // Integer: 过渡效果的执行速度，以毫秒（millisecond）为单位

  label: "Menu", // String: Label for the navigation toggle

  insert: "after", // String: Insert the toggle before or after the navigation

  customToggle: "", // Selector: Specify the ID of a custom toggle

  openPos: "relative", // String: Position of the opened nav, relative or static

  jsClass: "js", // String: 'JS enabled' class which is added to <html> el

  debug: false, // Boolean: Log debug messages to console, true 或 false

  init: function(){}, // Function: Init callback

  open: function(){}, // Function: Open callback

  close: function(){} // Function: Close callback

});

可调用的方法

// 销毁插件

navigation.destroy();

// Toggle

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. 前端基础之CSS_1

    摘要 CSS(层叠样式表)的三种设置方法 基本选择器 组合选择器 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 一些样式的设置(字体.文本.背景.边框) display属性设置 0 ...

  2. Django关于SQL注意事项

    执行原生SQL: from django.db import connection, connections cursor = connection.cursor() cursor.execute( ...

  3. LeetCode01--两数之和

    ''' 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素. 示例: 给 ...

  4. [AI开发]基于DeepStream的视频结构化解决方案

    视频结构化的定义 利用深度学习技术实时分析视频中有价值的内容,并输出结构化数据.相比数据库中每条结构化数据记录,视频.图片.音频等属于非结构化数据,计算机程序不能直接识别非结构化数据,因此需要先将这些 ...

  5. [codevs1050]棋盘染色 2

    [codevs1050]棋盘染色 2 试题描述 有一个5*N的棋盘,棋盘中的一些格子已经被染成了黑色,你的任务是对最少的格子染色,使得所有的黑色能连成一块. 输入 第一行一个整数N(<=100) ...

  6. BZOJ 1022: [SHOI2008]小约翰的游戏John【anti-SG】

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...

  7. BZOJ4580: [Usaco2016 Open]248

    n<=248个数字,可以进行这样的操作:将相邻两个相同的数字合并成这个数字+1,求最大能合成多少. f(i,j)--区间i到j能合成的最大值,f(i,j)=max(f(i,k)+1),f(i,k ...

  8. <转>C#中线程的学习

    原文发布时间为:2008-11-15 -- 来源于本人的百度文章 [由搬家工具导入] http://hi.baidu.com/cyap/blog/category/%B6%E0%CF%DF%B3%CC ...

  9. 事件和委托：第 5 页 委托、事件与Observer设计模式

    原文发布时间为:2008-11-01 -- 来源于本人的百度文章 [由搬家工具导入] 委托、事件与Observer设计模式 范例说明 上面的例子已不足以再进行下面的讲解了，我们来看一个新的范例，因为之 ...

  10. hdu 4046 Panda [线段树]

    Panda Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...