New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opera7+

Simple Tree Menu

Author: Dynamic Drive

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
  • Item 1
  • Item 2
  • Folder 1
    • Sub Item 1.1
    • Sub Item 1.2
  • Item 3
  • Folder 2
    • Sub Item 2.1
    • Folder 2.1
      • Sub Item 2.1.1
      • Sub Item 2.1.2
  • Item 4
Simple Tree Menu #2 (Folder 1.1 open by default):
Expand All | Contact All
  • Item 1
  • Folder 1
    • Sub Item 1.1
    • Folder 1.1
      • Sub Item 1.1.1
      • Sub Item 1.1.2
      • Folder 1.1.1
        • Sub item 1.1.1.1
        • Sub item 1.1.1.2
        • Sub item 1.1.1.3
        • Sub item 1.1.1.4
  • Item 2

Directions Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

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"):

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:

Select All

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:

  1. 1st parameter is the ID of the list to transform.
  2. 2nd parameter is a Boolean value (true of false) indicating whether you want persistence to be enabled.
  3. 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!