jQuery插件NotesForMenu制作树状菜单

这里介绍一个实现树状菜单的jQuery插件NotesForMenu，使用方法简单，只需要使用ul与li元素包裹相应的子菜单即可，效果图如下：

使用说明
需要使jQuery库文件和NotesForMenu库文件

可选jQuery UI插件
同时需要自定义树状菜单的CSS样式

使用实例
一，包含文件部分

1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
2. <script src="JQuery-ui.js" type="text/javascript"></script>
3. <script src="JQuery.MenuTree.js" type="text/javascript"></script>
4. <link href="Styles.css" rel="stylesheet" type="text/css" />

二，HTML部分

1. <div id="biuuu" class="menuTree">
2. <ul>
3. <li class="parent"><a href="#">必优博客1</a>
4. <ul>
5. <li class="child"><a href="#">jquery1</a></li>
6. <li class="child"><a href="#">jquery2</a></li>
7. <li class="child"><a href="#">jquery3</a></li>
8. </ul>
9. </li>
10. <li class="parent"><a href="#">必优博客2</a>
11. <ul>
12. <li class="parent"><a href="#">jquery1</a>
13. <ul>
14. <li class="parent"><a class="parent" href="#">jquery1</a>
15. <ul>
16. <li class="child"><a href="#">jquery1</a></li>
17. <li class="child"><a href="#">jquery1</a></li>
18. <li class="child"><a href="#">jquery1</a></li>
19. </ul>
20. </li>
21. <li class="child"><a href="#">jquery1</a></li>
22. <li class="child"><a href="#">jquery1</a></li>
23. </ul>
24. </li>
25. <li class="parent"><a href="#">jquery1</a>
26. <ul>
27. <li class="child"><a href="#">jquery1</a></li>
28. <li class="child"><a href="#">jquery2</a></li>
29. <li class="child"><a href="#">jquery3</a></li>
30. </ul>
31. </li>
32. <li class="child"><a href="#">jquery1</a></li>
33. </ul>
34. </li>
35. <li class="child"><a href="#">必优博客3</a></li>
36. </ul>
37. </div>

这里列出的HTML元素比较多，但实质上是很简单的，一个DIV层中包裹的ul和li元素

1. <div>
2. <ul>
3. <li>包含子菜单[更多的<ul><li></li></ul>]</li>
4. </ul>
5. <div>

三，Javascript部分

1. $('#biuuu').menuTree();

如上实例，javascript调用就非常简单，直接调用menuTree()接口。

NotesForMenu插件其它的应用，如下：
一，增加菜单展开效果

1. $('#biuuu').menuTree({
2. expandSpeed: 1000,
3. collapseSpeed: 1000,
4. expandEasing: 'easeOutBounce',
5. collapseEasing: 'easeOutBounce',
6. parentMenuTriggerCallback: false,
7. multiOpenedSubMenu: true
8. });

各参数说明如下：
expandSpeed和collapseSpeed表示展开和收缩的速度
expandEasing和collapseEasing表示展开和收缩擦除事件
parentMenuTriggerCallback表示上一级是否触发回调事件
multiOpenedSubMenu表示是否允许展开多级菜单

二，调用菜单展开事件

1. $('#biuuu').menuTree({
2. expandedNode: '2.1'
3. }, function(rel) {
4. alert(rel);
5. });

expandedNode表示展开的节点

使用jQuery插件NotesForMenu制作树状菜单使用比较简单，直接定义相应的参数即可，主要还是在菜单的CSS样式设置，这将直接影响到菜单的显示效果，具体应用可参考实例的CSS样式，值得推荐。