Creating a TreeView JQuery Hierarchical Navigation System

Are you interested in adding animation effects to the drop-down menus on your web page, but afraid that it’s going to take long hours of painful coding to pull it off? Keep reading. This series of articles will show you how to work some easy magic with the Treeview JQuery plug-in and a simple nested HTML list.

As you may have noticed, hierarchical navigation systems are a common part of many web-based front-ends these days. Undeniably, the most typical implementation of these systems is via drop-down menus, which may contain different subcategories that users can navigate easily.

In reality, web sites that stick to the standards usually include this kind of drop-down menu in the form of nested HTML lists, which are hidden and displayed properly on screen by means of a few simple CSS styles. As long as these hierarchical structures permit users to navigate sections of a web site without sacrificing accessibility, all is well. However, this scenario may change dramatically and become extremely complex if the behavior of a drop-down menu needs to be enhanced with some kind of animation effect.

In a case like this, it’s necessary to appeal to JavaScript to create the effect, either by developing a custom application or by using a third-party library that allows you to perform this task in a truly effortless fashion. While the first option is still perfectly viable, it requires the developer to create complicated DOM-based scripts from scratch. However, there’s no need to “reinvent the wheel” in this situation, because there are numerous packages available on the web that allow us to build hierarchical navigation systems very quickly and in a unobtrusive manner.

Among the huge variety of libraries that perform this task, one of the most solid and robust solutions can be found in the TreeView jQuery plug-in. Best of all, it offers a flat learning curve. Indeed, this plug-in permits developers to build hierarchical menus whose branches can be expanded and collapsed in all sorts of clever ways, and only requires the creation of a set of standard nested HTML lists to leverage all its functionality.

Thus, in this four-part series of articles I’m going to take a close look at this useful JavaScript library, so you can start using it within your own web sites in a short time. Now it’s time to show you some functional code, so let’s learn how to build professional-looking hierarchical menus with the TreeView jQuery plug-in. Let’s get started!

{mospagebreak title=The skeleton of the tree view system}

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.

{mospagebreak title=Using the TreeView plug-in}

In the previous segment, I built a sample (X)HTML file that included a few basic nested HTML lists to create the skeleton of a navigational tree. Now it’s time to turn this static structure into a truly dynamic one by using the TreeView plug-in. Want to see how the library does its magic? Check out the brand new definition of the previous (X)HTML file, which now uses the plug-in to convert each nested HTML list into a collapsible branch. Here it is:

 

<!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>Example on jQuery TreeView (branches are initially closed)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

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

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

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</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>

While at first sight the above (X)HTML file doesn’t seem to do anything spectacular, it’s actually performing quite a few tasks. First, you should notice that the file starts by including three dependencies: the jQuery library, the TreeView plug-in and a new style sheet, called “jquery.treeview.css.” Of course, you must keep in mind that all of these files are mandatory and must always be loaded each time you attempt to use the plug-in.

But, at this point, has anything useful been achieved with the previous sample file? You bet. If you try the above example on your own web server, you should see that the static nested HTML lists now have been turned into a dynamic tree system, whose main branches are displayed initially collapsed.

The following screen capture should give you a better idea of how the navigational tree looks:

That’s a neat hierarchical system, right? And best of all, it was constructed with some basic nested HTML lists. Hopefully, this introductory example should give you an idea of the real functionality provided by the TreeView plug-in, but as I said before, this is merely an introduction to using its main features.

As you saw in the previous image, the main branches of the tree are shown initially closed because each of them has been assigned a “closed” CSS class. It’s also possible to make them to be shown opened instead. Therefore, in the section to come I’m going to explain how to do this, with another easy-to-grasp code sample. So click on the link that appears below and read the next few lines.

{mospagebreak title=Collapsing tree branches using the TreeView plug-in}

In the previous section, you learned how to create a hierarchical menu tree where all of its branches were initially displayed collapsed. However, it’s very easy to modify this behavior and make them appear opened instead. To accomplish this, I simply need to remove the “closed” CSS classes assigned to the pertinent branches, as is demonstrated by the following example:

 

<!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>Example on jQuery TreeView (branches are initially open)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

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

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

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li>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>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>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>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>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>

Now that all of the “closed” CSS classes have been removed from each branch of the tree, they’ll be displayed initially open. The result of this process can be seen more clearly if you look at the screen shot below:

Hopefully, this example demonstrates how easy it is to construct hierarchical trees with the help of the TreeView jQuery plug-in. As usual, feel free to edit the code sample developed in this tutorial, so you can acquire more practice with this powerful JavaScript library.

Final thoughts

In this first chapter of the series, I introduced you to using the TreeView jQuery plug-in to create a professional hierarchical navigation system. Nonetheless, I’m only scratching the surface of the numerous features that come packaged with the plug-in. In the upcoming part I’m going to explain how to control which branches of the tree must be displayed collapsed and expanded.

Now that you’ve been told what topics will be covered in the next article of this series, you simply can’t miss it!  

[gp-comments width="770" linklove="off" ]

chat