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

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:jquery 菜单导航 CSS3 手风琴 
jQuery和CSS3动感手风琴多级列表树菜单 jQuery和CSS3动感手风琴多级列表树菜单
阿里云

简要教程

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

使用方法

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

<linkhref="mtree.css"rel="stylesheet">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="mtree.js"></script>
<scriptsrc='js/jquery.velocity.min.js'></script>   

HTML结构

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

  • bubba
  • skinny
  • transit
  • jet
  • nix

<ulclass="mtree transit">
 
  <li><ahref="#"><ahref="http://www.htmleaf.com/jQuery/Menu-Navigation/">Menu</a> 1</a>
    <ul>
      <li><ahref="#">Sub-menu 1</a></li>
      <li><ahref="#">Sub-menu 2</a></li>
      <li><ahref="#">Sub-menu 3</a></li>
    </ul>
  </li>
   
  <li><ahref="#">Menu 2</a>
    <ul>
      <li><ahref="#">Sub-menu 1</a></li>
      <li><ahref="#">Sub-menu 2</a></li>
      <li><ahref="#">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 )。

共有人阅读,期待你的评论!评论
Top