jQuery可最大化和最小化的多级导航菜单插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery.stacky是一款简单实用的可以最大化和最小化的多级导航菜单jQuery插件。该导航菜单可以以栈式结构水平多级展开，每一个菜单面板都可以最大化，最下化和关闭。你可以通过scss文件来自定义各个面板的样式。

可以通过下面的动态图片来查看这个插件的一些效果。

栈式面板导航菜单

安装

可以通过nmp或bower来安装该导航菜单插件。

npm install jquery.stacky
bower install jquery.stacky

该插件需要jQuery1.7+版本的支持，使用是要引入jQuery和jquery.stacky.js以及样式文件jquery.stacky.css文件。

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.stacky.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/jquery.stacky.css" />

使用方法

HTML结构

该导航菜单的HTML结构包括菜单面板和触发按钮两个部分。

<div id="panels"></div>
<nav class="nav">
  <ul>
    <li><a href="#" class="open-panel"><i class="fa fa-home"></i></a></li>
    <li><a href="" class="open-panel"><i class="fa fa-dashboard"></i></a></li>
    <li><a href="" class="open-panel"><i class="fa  fa-envelope-o"></i></a></li>
  </ul>
</nav>

初始化插件

在页面DOM元素加载完毕之后，你可以通过下面的方法来初始化该导航菜单插件。

$( document ).ready(function() {
    var default_options = { ... };
    var container  = $( '#container' ).Stacky( default_options );
});

要在一个面板上展开新的面板，可以使用下面的方法：

var panel_options = { ... };
container.data( 'Stacky' ).push( panel_options );

配置参数

下面是该栈式导航菜单插件的一些可用配置参数。

fadeInSpeed：取值：Integer | 'fast' | 'slow'。一个新的面板淡入淡出显示的速度。设置整数时的单位为毫秒。
scrollToSpeed：取值：Integer | 'fast' | 'slow'。当添加，展开和收缩面板时滚动条移动的速度。
panelDefaults：取值：Object。所有新面板中包含的默认参数对象。

插入面板的参数：

after：jQuery对象。如果定义了该参数，新面板被插入到这个jQuery对象（一个面板）之后。
content：String。插入到面板之后的HTML内容。
floating：boolean。是否将面板放置在after面板之后（设置为turue），还是放置在其它面板之后。
id：String。新面板的ID。
class：先面板的class名称。class样式包括预定义的thin，regular，medium和wide，这些class用于设置面板的宽度。expaned class可以使面板具有最大化功能，默认宽度为100%。
onBeforeOpen：在新面板显示前的回调函数。
onBeforeClose：在隐藏和移除面板之前的回调函数。