当前位置:主页 > 网页特效 > 菜单导航 >

jQuery可最大化和最小化的多级导航菜单插件

发布时间:2018/08/21 来源:互联网 浏览: 关键词:jquery 菜单导航 
jQuery可最大化和最小化的多级导航菜单插件 jQuery可最大化和最小化的多级导航菜单插件
阿里云

简要教程

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

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

栈式面板导航菜单

安装

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

npm install jquery.stacky
bower install jquery.stacky    

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

<scriptsrc="path/to/jquery.js"></script>
<scriptsrc="path/to/jquery.stacky.min.js"></script>
<linkrel="stylesheet"type="text/css"href="path/to/jquery.stacky.css"/>     

使用方法

HTML结构

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

<divid="panels"></div>
<navclass="nav">
  <ul>
    <li><ahref="#"class="open-panel"><iclass="fa fa-home"></i></a></li>
    <li><ahref=""class="open-panel"><iclass="fa fa-dashboard"></i></a></li>
    <li><ahref=""class="open-panel"><iclass="fa  fa-envelope-o"></i></a></li>
  </ul>
</nav>   

初始化插件

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

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

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

varpanel_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:在隐藏和移除面板之前的回调函数。

方法

该插件中内置了一些可用的方法。

  • closeActive:function ( )。关闭当前激活的面板(或带有active class的面板)。
  • highlight:function ( $panel )。移动滚动条显示给定的面板,并高亮显示它。它会简单的显示左右阴影1秒钟。
  • goTo:function ( $panel, callback )。移动滚动条显示给定的面板,然后执行回调函数。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top