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

mtree.js是一款效果非常炫酷的jQuery和CSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于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 ）。