Custom Tags Aninhadas

Build a List, Get a Tree

How to create an outlined tree from <ul> and <li> tags, CSS and JavaScript

 

Cláudio Alexandre da Costa Dias«

Introduction

Hierarchical data can be fairly represented using <ul> and <li> HTML tags. For instance, in order to represent a company?s organization chart, we could write:

 

Text Box: 	<ul>
		<li><span>Division</span>
			<ul>
				<li><span>Department</span>
					<ul>
						<li><span>Employee 1</span></li>
						<li><span>Employee 2</span></li>
						<li><span>Employee 3</span></li>
						...
					</ul>
				</li>
				...
			</ul>		
		</li>
		...
	</ul>

Viewing it in a browser:

 


 

With some CSS statements, we can give this list a much better aspect.

In this tutorial, we?ll learn how to convert this list into an outlined tree control, using an elaborated CSS and some JavaScript code.

The tree control, or tree, shows you the relationships among nodes and provides items expand/collapse control.

 


Implementation

Let?s build our tree from Megaputz company organization chart, displayed below:

 

Megaputz Inc.

Division

Department

Employee

CEO

 

 

Industry

Engineering

Axel Lissmann

Claudia Kuhlmann

Ronald Lorenz

Thorsten Goeckeler

Manufacturing

Hardy Mums

Mike O'Phone

Peter Piper

Administrative

Finance

About This Tutorial
Author: Claudio Dias
Skill Level: Intermediate 
 
 
 
Platforms Tested: CFMX
Total Views: 115,296
Submission Date: November 09, 2004
Last Update Date: June 05, 2009
All Tutorials By This Autor: 3
Discuss This Tutorial
  • this is ok but is there any easiest method to generate this tree using database?

Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.