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:
- It used modern, unobtrusive DOMscripting that only shows the functionality when JavaScript is enabled.
- It is fully self-contained and works well with other scripts
- Lists can be collapsed and expanded with keyboard and mouse
- You can style the tree completely in CSS - the script does not change any of the look and feel.
- It allows endless levels of nested lists.
- It is free
What now?