Tree menu

Here's my own tree menu that turns a simple and satandard compliant <ul /> tag into a beautyful tree menu like those you can see in popular OS like Windows or Linux.

Example :

node 01

How does this work ?

For stylesheet, just download the CSS file that you can customize.

		
  <ul id="tree">
    <li>
      <img src="folder.png" />
      <a>Menu</a>
      <ul>
          <li>
            <img src="folder.png" />
            <a>Sub menu</a>
              <ul>
                <li>
                  <img src="file.png" />
                  <a>Sub choice 1</a>
                </li>
                <li>
                  <img src="file.png" />
                  <a>Sub choice 1</a>
                </li>
              </ul>
          </li>
          <li>
            <img src="file.png" />
            <a>Choice 1</a>
          </li>
          <li>
            <img src="file.png" />
            <a>Choice 2</a>
          </li>
        </ul>
    </li>
  </ul>

Javascript

		
  var TM = new TreeMenu($('tree'));

Options

showLines: Bolean, // Show the hierarchical lines
useCookies: Bolean, // later :)
className: String // CSS class name of the <ul />

Which gives :

		
  var TM = new TreeMenu($('tree'){
    showLines: true,
    useCookies: false,
    className: 'tree'
  });

Methods

`search(object node)`

Searches for a object node and opens it and its parents.

`searchByValue(property, value)`

Searches for a node object whose property contains value and opens it and its parents.
example : TM.searchByValue('id', 'node_01');

`path(object node)`

Returns the path from the root node to the object node. This method is used by search().
example : TM.path(oNode);

`adoptNode`

Make object parent node adopt a newly created object node.
example : TM.adoptNode(TM.createNode('new node', '', function(){}, 'icon.png'), TM.searchByValue('text', 'node 01.1'));