Creating a TreeView JQuery Hierarchical Navigation System - The skeleton of the tree view system (
Page 2 of 4 )
As I stated in the introduction, the TreeView plug-in requires a nested HTML list to function properly. Therefore, I’m going to create a group of nested HTML lists, which will comprise the skeleton of the hierarchical menu.
Here’s a simple (X)HTML file that creates these lists. Take a look at how it’s been defined:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample nested HTML lists</title>
</head>
<body>
<ul id="menu">
<li class="closed">Link 1
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
<li>Sub link 5</li>
</ul>
</li>
<li class="closed">Link 2
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
<li>Sub link 5</li>
</ul>
</li>
<li class="closed">Link 3
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
<li>Sub link 5</li>
</ul>
</li>
<li class="closed">Link 4
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
<li>Sub link 5</li>
</ul>
</li>
<li class="closed">Link 5
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
<li>Sub link 5</li>
</ul>
</li>
</ul>
</body>
</html>
As you can see, the structure of the above (X)HTML file is really simple to grasp. It only includes a few nested HTML lists, which will come handy for creating a hierarchical tree structure whose branches will be completely collapsible. By the way, you may have noticed that some of the items contained within each nested list have been assigned a “closed” CSS class.
This makes a lot of sense, actually, since it is by way of these classes that it will be possible to specify whether a particular branch of the tree must be initially collapsed (in other words, closed) or expanded. But I’m getting ahead of myself, because this process will be discussed in more detail when I show you how to use the TreeView plug-in to animate the nested HTML lists that you saw before.
This process will be discussed in the course of the following section. Therefore, to learn how it will be accomplished, click on the link that appears below and keep reading.
