JavaScript Tutorials Advanced
Javascript Tree Menu
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.
—
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced
[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Tutorials Advanced -
text
|
