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:
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
Author: Claudio Dias
ADVERTISEMENT
|