jQuery和CSS3动感手风琴多级列表树菜单

当前位置:主页 > jQuery库 > 菜单和导航 > jQuery和CSS3动感手风琴多级列表树菜单
jQuery和CSS3动感手风琴多级列表树菜单
分享:

    插件介绍

    mtree.js是一款效果非常炫酷的jQuery和CSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于velocity.js和CSS3 transitions来制作。它提供了5种主题样式的手风琴列表树菜单效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-25
    阅读:
简要教程

mtree.js是一款效果非常炫酷的jQueryCSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于jQuery velocity.js和CSS3 transitions来制作。通过点击菜单项可以无限级打开子菜单。它提供了5种主题样式的手风琴列表树菜单效果。

使用方法

使用该手风琴多级列表树菜单插件要引入jQuery和mtree.js文件。要加速列表树菜单的动画效果需要引入velocity.js文件。另外要引入必要的样式文件mtree.css。

<link href="mtree.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="mtree.js"></script>
<script src='js/jquery.velocity.min.js'></script>               
              
HTML结构

该手风琴多级列表树菜单插件的HTML结构使用的是无序列表,它内置了5种主题样式的菜单效果,可以在<ul>元素中的class中引入相应的主题,这5种主题分别为:

  • bubba
  • skinny
  • transit
  • jet
  • nix
<ul class="mtree transit">

  <li><a href="#"><a href="http://www.htmleaf.com/jQuery/Menu-Navigation/">Menu</a> 1</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
  
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
  
  ...
  
</ul>           
              

配置参数

  • var collapsed = true:初始化时收缩手风琴菜单树,只有第一级的列表可以被看见。
  • var close_same_level = false:打开新节点时关闭同级的元素。
  • var duration = 400:动画的持续时间。
  • var listAnim = true:在打开/关闭元素时只单独动画该列表项(仅适用于velocity.js)。
  • var easing = 'easeOutQuart':jQuery动画的easing效果,默认为"swing"(仅适用于velocity.js )。

网友评论