NotesForMenu: a simple multi-level menu tree plugin with JQuery

NotesForMenu is a very simple JQuery plugin to create a multi-level menu with only one line of code. You can also very easily customize it. Do not hesitate to have a look at the code. Any suggestions/remarks/improvements are welcome.

Demo

MenuTree demo 1

default behaviour

MenuTree demo 2

expandSpeed: 1000
collapseSpeed: 1000
expandEasing: 'easeOutBounce'
collapseEasing: 'easeOutBounce'
multiOpenedSubMenu: true

MenuTree demo 3

expandedNode: '2.1'
callback: function(rel) {alert(rel)};

How to use it?

1. Create your menu using the following tree structure and add class to li elements:

- parent for a node
- child for a leaf

<div id="menu" class="menuTree"> <ul> <li class="parent"><a href="#">Animals</a> <ul> <li class="child"><a href="dog.htm" >dog</a></li> <li class="child"><a href="cat.htm">cat</a></li> <li class="child"><a href="duck.htm">duck</a></li> </ul> </li> </ul> </div>

2. Add external JQuery references and initialization script in your page:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/JQuery-ui.js" type="text/javascript"></script> <!-- Only needed for special easing effect --> <script src="js/JQuery.MenuTree.js" type="text/javascript"></script>
<script type="text/javascript"> $(function() { $('#menu1').menuTree(); }); </script>

3. (Optional) give parameter(s) and/or customize css:

Options:

menuEvent - event to trigger expand/collapse; default = click
expandSpeed - default = 500 (ms); use -1 for no animation
collapseSpeed - default = 500 (ms); use -1 for no animation
expandEasing - easing function to use on expand (optional)
collapseEasing - easing function to use on collapse (optional)
multiOpenedSubMenu - whether or not to limit to one opened menu at a time; default = false;
parentMenuTriggerCallback - whether or not parent menu triggers callback; default = false;
expandedNode - default node to expand (optional)

exemple:
$('#menu2').menuTree({ expandSpeed: 1000, collapseSpeed: 1000, expandEasing: 'easeOutBounce', collapseEasing: 'easeOutBounce', parentMenuTriggerCallback: false; multiOpenedSubMenu: true });
Callback:

a callback function triggered with rel parameter (see demo3).

exemple:
$('#menu3').menuTree({ expandedNode: '2.1' }, function(rel) { alert(rel); });
Css:

use the class defined in the div to customize your menu from the css file.

exemple:
Have a look at the file Styles.css

History

1.0 - first release (28 May 2009)

Licence

This plug-in was inspired by the great JQuery File Tree written by Cory S.N. LaViska. This plugin is dual-licensed under the GNU General Public License and the MIT License.