Here we will give you a simple Javascript menu
that uses an Unordered list <UL></UL>. The organization
of the menu is simple and easy, which gives it the opportunity to
be used in combination with a text file or any SQL Server. Below
is an example of how it can be used with SQL Server.
The first two functions in Javascript
find where the menu position and its contents are located. The third
function "outline Action()" defines onClick on the menu.
<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>
This expression can be used with a text file or SQL server. Main1 calls
out the variable parent of the menu, Menu1 = <%variable%>".
|
SQL
table Parent
|
|
ID
|
Parent
|
| |
Main
|
| |
Main
|
| |
Main
|
| |
Main
|
|
SQL
table Item
|
|
ID
|
ParentID
|
Item
|
| |
|
Item
|
| |
|
Item
|
| |
|
Item
|
| |
|
Item
|
| |
|
Item
|
| |
|
Item
|
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)
This code will locate Parent menu1(Main1) and all its elements. The
results will be placed in the <UL></UL> block:
<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>
post your comment
print
send to a friend
Browse the Base
