⚠️**不赞成的**⚠️ 一个带有远大梦想的小型滑动面板导航jQuery插件
Posted
tags:
中文标题：⚠️**不赞成的**⚠️ 一个带有远大梦想的小型滑动面板导航jQuery插件 原文标题：⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams 项目评级：Star:404 Fork:113 下载地址：https://github.com/ascott1/bigSlide.js 详情介绍此项目不再受支持。
bigSlide是一个非常小（压缩约1kb）的jQuery插件，用于创建屏幕外的幻灯片面板导航。
它将滑动导航面板以及任何给定.push类（或您在设置中选择的类）的容器。
安装
下载缩小或未缩小的源代码。
使用npm还是Bower？
bigSlide可作为另一个npm和Bower软件包使用。只需运行：
npm install bigslide
bower install bigSlide
入门
在您的文档中，包括一个用于切换导航的链接：
<a href="#menu" class="menu-link">☰</a>
以及您的导航菜单：
<nav id="menu" class="panel" role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Ballad of El Goodo</a></li>
<li><a href="#">Thirteen</a></li>
<li><a href="#">September Gurls</a></li>
<li><a href="#">What's Going Ahn</a></li>
</ul>
</nav>
参考jQuery和big-slide.js文件：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.big-slide.js"></script>
要初始化插件，请执行以下操作：
<script>
$(document).ready(function()
$('.menu-link').bigSlide();
);
</script>
您可以使用预定义的选项初始化插件。确保每个值都包含在报价中：
<script>
$(document).ready(function()
$('.menu-link').bigSlide(
menuWidth:'18em',
push: ('.mypush'),
speed:'450'
);
);
</script>
选项
<表格>
变量 默认值 描述
true，以允许导航菜单在导航时记住其以前的状态true，允许用户通过任何点击切换关闭菜单.activetrue可折叠菜单，而不是关闭菜单，只看到部分菜单其他注意事项
虽然bigSlide会自动将菜单定位在屏幕外，但我建议在CSS中添加以下内容，以防止加载时菜单闪烁：
.panel
position: fixed;
left: -15.625em; /*right or left and the width of your navigation panel*/
width: 15.625em; /*should match the above value*/
此外，任何使用.push类的元素都应该相对定位：
.wrap
position: relative;
如果你想收缩主容器div，而不是只推它，这将允许你在导航栏打开的情况下在应用程序中工作，那么应用.shrink类来代替.push。
许可证
麻省理工学院许可证（MIT）
版权所有（c）2013 Adam Scott
特此免费授予任何获得
的副本
本软件和相关文档文件（“软件”），用于处理
软件不受限制，包括但不限于
使用、复制、修改、合并、发布、分发、分许可和/或出售
软件，并允许向其提供软件的人员这样做，
符合以下条件：
上述版权声明和本许可声明应包含在
软件的副本或实质部分。
该软件是“按原样”提供的，没有任何形式的担保，明示或
隐含的，包括但不限于对适销性、适用性的保证
为了特定目的和不侵权。在任何情况下，作者或
版权持有人应对任何索赔、损害赔偿或其他责任负责，无论
因合同、侵权或其他原因引起的诉讼
与软件的连接或软件的使用或其他交易。