 JavaScript Page 2 - Creating a TreeView JQuery Hierarchical Navigation System |
| JavaScript Page 2 - Creating a TreeView JQuery Hierarchical Navigation System |
The skeleton of the tree view system - JavaScriptAre 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.
print this article SEARCH DEV SHED |
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.
blog comments powered by Disqus |
|
|
|
|
|
|
|
/ 7 
