Simple Tree Menu
Note: Replaces original Smart Folding menu on same page.
Description: This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! Once transformed, the original list and its sublists can be collapsed/expanded at will, with cookies used to optionally persist its state. Here's an overview of the script:
- Plug and play script that turns a UL list into a tree menu, with any sublists collapsed by default.
- Ability to specify that certain sublists be expanded by default, by giving that LI element a rel="open" attribute.
- Expand or contact all sublists by invoking two functions, either via links, or inline in the script etc.
- Simple CSS defines the look of the tree, such as the folder and list images to be used.
- Optional persistence feature to remember the last state of the tree by user for x number of days.
- Ability to define multiple Tree menus on the same page.
Demo:
Simple Tree Menu #1 (persist enabled):Expand All | Contact All |
Simple Tree Menu #2 (Folder 1.1 open by default):Expand All | Contact All |
Step 1: Insert the following code into the <head> section of your page:
Step 2: The above code references a few external files, which you need to save and upload to your webpage directory (right click each file and select "Save As"):
- simpletreemenu.js
- simpletree.css
- 3 images:
Step 3: Insert the following into the <body> section of your page. It contains 2 sample Tree Menus and a script at the end to initialize them:
That's it!
Configuration Help
The HTML for your tree menu as seen in Step 3 is simply an ordinary HTML list (make sure it's valid syntax wise!), such as:
<ul id="treemenu2" class="treeview"> <li>Item 1</li> <li>Folder 1 <ul> <li>Sub Item 1.1</li> <li>Folder 1.1 <ul rel="open"> <li>Sub Item 1.1.1</li> <li>Sub Item 1.1.2</li> <li>Folder 1.1.1 <ul> <li>Sub item 1.1.1.1</li> <li>Sub item 1.1.1.2</li> <li>Sub item 1.1.1.3</li> <li>Sub item 1.1.1.4</li> </ul> </li> </ul> </li> </ul> </li> <li>Item 2</li> </ul>
As you can see, sublists are simply additional UL elements contained inside a LI element. Following the list, to turn it into a dynamic menu tree, just call the function ddtreemenu.createTree():
<script type="text/javascript"> //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1)) ddtreemenu.createTree("treemenu2", true, 5) </script>
where:
- 1st parameter is the ID of the list to transform.
- 2nd parameter is a Boolean value (true of false) indicating whether you want persistence to be enabled.
- 3rd parameter is the number of days to persist menu state assuming persistence is enabled. This last parameter is optional, and if omitted, defaults to 1 (day).
This function can be invoked multiple times to transform multiple lists on the page each to their own independent tree menu.
Changing the contract/expand state of a tree menu
By default when you transform a list into tree menu, all sublists are contracted until clicked on. You can set a particular sublist (and all of its parent sublists, if any) to be expanded by default by inserting the attribute:
<li>Folder 1.1 <ul rel="open"> <li>Sub Item 1.1.1</li> <li>Sub Item 1.1.2</li> <li>Folder 1.1.1 <ul> <li>Sub item 1.1.1.1</li> <li>Sub item 1.1.1.2</li> <li>Sub item 1.1.1.3</li> <li>Sub item 1.1.1.4</li> </ul> </li> </ul>
inside the UL element you wish to be expanded automatically when the page loads.
-Contract all/ expand all functionality
You can also cause a menu tree to contract or expand all of its sublists by calling two methods of the script. For example, to do so via links would look like:
<a href="javascript:ddtreemenu.flatten('treemenu2', 'expand')">Expand All</a> <a href="javascript:ddtreemenu.flatten('treemenu2', 'contact')">Contact All</a>
where "treemenu2" is the ID of the list. These methods can also be called inside your script, for example, to cause a menu tree to be completely expanded by default:
<script type="text/javascript"> //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1)) ddtreemenu.createTree("treemenu2", true, 5) ddtreemenu.flatten('treemenu2', 'expand') </script>
Cool!