Home arrow JavaScript arrow Page 2 - Creating a TreeView JQuery Hierarchical Navigation System

The skeleton of the tree view system - JavaScript

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.

TABLE OF CONTENTS:
  1. Creating a TreeView JQuery Hierarchical Navigation System
  2. The skeleton of the tree view system
  3. Using the TreeView plug-in
  4. Collapsing tree branches using the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 7
April 20, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: