Responsive Nav
2016-05-06 10:53
357 查看
引入文件
<!-- 引入这些文件至 <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();
相关文章推荐
- 十进制与二进制相互转换
- 单链表的逆置
- makefile---include的使用
- 常用SQL整理 - DENSE_RANK()
- 怪异的JAVA对象属性存储
- 知识普及:彻底搞懂CSS中单位px和em,rem的区别
- Netbeans使用技巧,从点滴提高编程效率
- Linux进程的睡眠和唤醒
- 第6届山东省浪潮杯 Circle of Friends SDUT3262
- 查找所有的文本文件然后打印出来
- 最新 Bitnami redmine安装与配置
- oracle 11g 之LogMiner分析重做日志实践
- ORACLE中将一列已有数据的字段类型进行改变的解决方案
- Action中获取web对象的方式
- Nginx的工作模式和一些理解
- GCD同步异步测试DEMO
- 饮食问题
- Dump调试之ExceptionCode
- VC中各数据类型所表示的范围和占用的字节数是多大?
- 线性表的顺序存储结构及该结构的插入与删除