Responsive Nav
2024-09-30 05:31:48
引入文件
<!-- 引入这些文件至 <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();
最新文章
- Linux 常识
- Easyui-combobox-checkbox-带复选框的下拉框
- Linux下select&;poll&;epoll的实现原理(一)
- Linux(centeros)安装weblogic10.3.6教程
- list 集合
- mac os 添加用户到组 命令
- javascript --- 再谈词法分析
- RMAN命令
- [转]C++中引用(&;)的用法和应用实例
- Thread系列——Thread.Sleep(0)
- EXTJS 4.2 资料 控件之Grid Columns 列renderer 绑定事件
- VM虚拟机安装苹果雪豹操作系统
- Oracle EBS-SQL (AR-1):检查应收收款发生额
- 将eclipse左边目录结构改为 树形结构
- ORACLE NLS_DATE_FORMAT设置
- 探索Visual Studio生成的.vs文件夹内部结构和作用
- 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件
- Android24以上拍照代码
- 理解linux下的load
- PS故障风海报制作技术分享