Home arrow JavaScript arrow Creating a TreeView JQuery Hierarchical Navigation System

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.

  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



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!

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


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