I want to use it for the richness that it offers. To that end, I have a working JS script that does what I am after. Say I have this markup:
Code: Select all
<div id="main-navigation">
<h2>Learn PHP</h2>
<ul class="tree-navigation">
<li class="branch-open"><a href="#">Introduction</a>
<ul>
<li class="branch-bullet"><a href="#" title="Introduction - Overview">Overview</a></li>
<li class="branch-bullet"><a href="#" title="Introduction - Web Servers">Web Servers</a></li>
<li class="branch-bullet"><a href="#" title="Introduction - What is PHP">What is PHP</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Getting Started</a>
<ul>
<li class="branch-bullet"><a href="#" title="Getting Started - Getting PHP">Getting PHP</a></li>
<li class="branch-bullet"><a href="#" title="Getting Started - Installing PHP">Installing PHP</a></li>
<li class="branch-bullet"><a href="#" title="Getting Started - Configuring PHP">Configuring PHP</a></li>
<li class="branch-bullet"><a href="#" title="Getting Started - Securing PHP">Securing PHP</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Programming Basics</a>
<ul>
<li class="branch-bullet"><a href="#" title="Programming Basics - Choosing an Editor">Choosing an Editor</a></li>
<li class="branch-bullet"><a href="#" title="Programming Basics - Your First Script">Your First Script</a></li>
<li class="branch-bullet"><a href="#" title="Programming Basics - Coding Syntax">Coding Syntax</a></li>
<li class="branch-bullet"><a href="#" title="Programming Basics - Commenting">Commenting</a></li>
<li class="branch-bullet"><a href="#" title="Programming Basics - Code Control">Code Control</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Moving Along</a>
<ul>
<li class="branch-bullet"><a href="#" title="Moving Along - Types">Types</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Variables">Variables</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Constants">Constants</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Expressions">Expressions</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Operators">Operators</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Control Structures">Control Structures</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Functions">Functions</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Classes and Objects">Classes and Objects</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - References">References</a></li>
<li class="branch-bullet"><a href="#" title="Moving Along - Reserved Words">Reserved Words</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Handling PHP</a>
<ul>
<li class="branch-bullet"><a href="#" title="Handling PHP - Output Handling">Output Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Error Handling">Error Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Exception Handling">Exception Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Variable Handling">Variable Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - String Handling">String Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Array Handling">Array Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - File Handling">File Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Form Handling">Form Handling</a></li>
<li class="branch-bullet"><a href="#" title="Handling PHP - Session Handling">Session Handling</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Database Interaction</a>
<ul>
<li class="branch-bullet"><a href="#" title="Database Interaction - Know Your Database">Know Your Database</a></li>
<li class="branch-bullet"><a href="#" title="Database Interaction - Database Abstraction">Database Abstraction</a></li>
<li class="branch-bullet"><a href="#" title="Database Interaction - Handling the Data">Handling the Data</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Common Problems</a>
<ul>
<li class="branch-bullet"><a href="#" title="Common Problems - Blank Page Displays">Blank Page Displays</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - Headers Already Sent">Headers Already Sent</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - Undefined Index">Undefined Index</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - Parse Errors">Parse Errors</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - General Notices">General Notices</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - General Warnings">General Warnings</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - General Errors">General Errors</a></li>
<li class="branch-bullet"><a href="#" title="Common Problems - Other Errors">Other Errors</a></li>
</ul>
</li>
<li class="branch-closed"><a href="#">Wrap Up</a>
<ul>
<li class="branch-bullet"><a href="#" title="Wrap Up - What's Next">What's Next</a></li>
<li class="branch-bullet"><a href="#" title="Wrap Up - Resources">Resources</a></li>
</ul>
</li>
</ul>
</div>A test of what I am doing can be found here. For the sake of this post, pretend that I haven't shown this design yet as I will be posting it soon to the UI board. Thanks for your help.
PS This is related to a previous thread I have posted, but the inner working of this markup are different than in the previous thread so I decided a new thread was in order.