Displaying a tree-view navigation menu

Yet another method of displaying a navigational hierarchy is the tree-view. This is familiar to users from cases such as browsing a directory structure of files and folders within a graphical operating system shell (for example, Microsoft Windows Explorer).

At the time of writing, YUI3 lacks a stable port of the TreeView widget so we will be using the TreeView widget from YUI2.

How to do it...

1. 1. We must define the markup of our menu tree, in this example within nav_tree.php:

   <?php
   require_once(dirname(__FILE__) . '/../config.php');
   $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
   $PAGE->set_url('/cook/nav_tree.php');
   $PAGE->requires->js('/cook/nav_tree.js', true);
   echo $OUTPUT->header();
   ?>
   <div id="treeContainer">
   <ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li>Sub Tree
   <ul>
   <li><a href="#">Sub Item 1</a>...