Home » Tutorials Advanced Tutorial

Javascript Tree Menu

2.4/5.0 (17 votes total)
Rate:

Ivo Kolev


Ivo Kolev

https://www.javascriptsearch.com
Ivo Kolev has written 1 tutorials for JavaScriptSearch.
View all tutorials by 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.


Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow