Explorer style tree navigations with unobtrusive DOMScripting - PureDOMExplorer

If you want to use a windows explorer style tree menu on your sites, pureDOMexplorer might be something for you.

A special thank you goes to Ingo Chao for helping fixing the demo CSS to work with Safari. We are still baffled why it works, but it does!

Simply download the script and call it in the head section of your HTML page:

<script 
type="text/javascript" src="pde.js"></script>

The script turns a nested list with the CSS class "pde" like the following example into a collapsible tree menu as shown in the demos.

<ul class="pde">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a>
    <ul>	
      <li><a href="#">Link 3_1</a></li>
      <li><a href="#">Link 3_2</a>
        <ul>
          <li><a href="#">Link 3_2_1</a></li>
          <li><a href="#">Link 3_2_2</a></li>
          <li><a href="#">Link 3_2_3</a></li>
          <li><a href="#">Link 3_2_4</a></li>
        </ul>
      </li>
      <li><a href="#">Link 3_3</a></li>
      <li><a href="#">Link 3_4</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
</ul>

PureDOMExplorer automatically recognises which list item has a nested list. It then adds a class called "parent" to this item and adds a linked image that shows and hides the nested list. In this example it turns the item "Link 3" into:

<li class="parent">
  <a href="#">
    <img title="open section" 
    alt="open section" src="plus.gif"></a>
  <a href="#">Link 3</a>
  [...]
</li>

The nested list gets hidden by adding a CSS class called "hide" to it.

PureDOMExplorer does not collapse a list if there is a STRONG element in it. This allows you to keep a "current section" state in your tree.

You can override the script settings by changing the properties of the pde object in the pde source file:

// CSS classes
pdeClass:'pde',
hideClass:'hide',
parentClass:'parent',
currentClass:'current',
// images added to the parent links
openImage:'minus.gif',
closedImage:'plus.gif',
openMessage:'close section',
closedMessage:'open section',
// boolean to make the parent link collapse the section or not 
linkParent:false,

That's all. Now let's just recap why using PureDOMExplorer is a good idea:

What now?

Demo #1
Demo #2
Not collapsed, as there is a strong element