Javascript Tree Menu
|
|
|
| 2.4/5.0 (17 votes total) |
|
|
|
Ivo Kolev
|
Simple JavaScript
menu, which use the possibilities of Unordered list <UL></UL>. The
organization of the menu is made simple and easy, which gives it the opportunity
to be used in combination with a text file or any SQL Server. In the code is
given an example of how it can be used with SQL Server.
The first two
functions in JavaScript find where the menu position and its content are
located. The third function "outline Action()" serves the mouse onClick on the
menu. The menu construction is below:
<DIV
onClick="JavaScript: outlineAction();"> <UL> <LI
class='Main'>Main1 <UL>
<LI
class='Item'>Item1</LI>
<LI
class='Item'>Item2</LI>
<LI
class='Item'>Item3</LI> </UL> </LI> <LI
class='Main'>Main2</LI> </UL> </DIV>
It can be used
with a text file or SQL server, as on the place of Main1 it calls out the
variable parent of the menu. Menu1 = <%variable%>
Example:
SQL
table Parents |
ID |
Parent |
1 |
Main1 |
2 |
Main2 |
3 |
Main3 |
4 |
Main4 |
SQL
table Items |
ID |
ParentID |
Items |
1 |
1 |
Item1 |
2 |
1 |
Item2 |
3 |
1 |
Item3 |
4 |
2 |
Item1 |
5 |
3 |
Item1 |
6 |
4 |
Item2 |
This
SQL: ----------- SELECT
`parents`.`Parent`, `parents`.`ID`, `items`.`id`, `items`.`ParentID`, `items`.`Items` FROM `parents`
INNER JOIN `items` ON (`parents`.`ID` =
`items`.`ParentID`) WHERE (`items`.`ParentID` = `parents`.`ID`) AND
(`parents`.`id` = 1)
It will bring
out Parent menu1(Main1) and all its elements. The results of SQL just have to be
replaced on the definite places in the <UL></UL> block.
Below is the
script:
<HTML> <HEAD> <TITLE></TITLE> <STYLE
TYPE='text/css'> li.Item { color: #000000; cursor: text; } ; li.Main {
color: #0000FF; cursor: hand; } ; ul ul { display: none; }
; </STYLE> <SCRIPT LANGUAGE='Javascript'> function
checkParent( src, tagName ) { while ( src != null ) { if (src.tagName ==
tagName) return src; src = src.parentElement; } return
null; } function checkContent( src, tagName ) { var pos =
src.sourceIndex ; while ( src.contains( document.all[++pos] ) ) if (
document.all[pos].tagName == tagName ) return document.all[pos] ; return
null ; } // onClick event function outlineAction() { var src =
event.srcElement ; var item = checkParent( src, "LI" ) ;
if ( parent !=
null ) { var content = checkContent( item, "UL" ) ;
if ( content !=
null ) if ( content.style.display == "" ) content.style.display = "block"
; else content.style.display = "" ; } event.cancelBubble =
true; }
</SCRIPT> </HEAD> <body> <DIV
onClick="JavaScript: outlineAction();"> <UL>
<LI
class='Main'>Main1 <UL>
<LI
class='Item'>Item1</LI>
<LI
class='Item'>Item2</LI>
<LI
class='Item'>Item3</LI> </UL> </LI> <LI
class='Main'>Main2</LI> </UL> </DIV> </body> </html>
Good
luck.
|