this is the code 
/*------------------------------------------------------------------
File: menu.js
Use: Collection of clients functions
that used for interface of the menu bar.
-------------------------------------------------------------------*/
var g_MaincontextMenu;
var currentMenu; //The last sub menu that open.
/*-----------------------------------------------------------------
Calculate the top position of the object.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
------------------------------------------------------------------*/
function offsetTop(obj)
{
var top = 0;
for (; obj; obj=obj.offsetParent)
{
top = top + obj.offsetTop;
}
return(top);
}
/*-----------------------------------------------------------------
Calculate the left position of the object.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
------------------------------------------------------------------*/
function offsetLeft(obj)
{
var left = 0;
for (; obj; obj=obj.offsetParent)
{
if (obj.tagName == "BODY") break;
left = left + obj.offsetLeft;
}
return(left);
}
/*-----------------------------------------------------------------
Loaded the child of the first menu.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
p_Dir Direction of the web: RTL or LTR
------------------------------------------------------------------*/
function loadContextMenu(obj, p_Dir)
{
var contextMenu;
var parentMenu;
parentMenu = returnContainer(obj);
contextMenu = document.all[obj.id + "Sub"];
//document.form2.strSearch.value = document.form2.strSearch.value + "," + contextMenu.id;
if (currentMenu)
{
menuOut(currentMenu);
}
if (contextMenu != null)
{
if(contextMenu.style.display == "block")
return;
contextMenu.style.display = "block";
var l_contextMenu_Top = offsetTop(parentMenu) + parentMenu.offsetHeight - 2;
contextMenu.style.top = l_contextMenu_Top;
contextMenu.style.width = parentMenu.offsetWidth;
contextMenu.firstChild.style.width = "100%";
contextMenu.parentMenu = parentMenu;
parentMenu.subMenu = contextMenu;
currentMenu = parentMenu;
if (p_Dir == 'RTL'){
if(contextMenu.clientWidth > parentMenu.clientWidth){
var contextMenuPosition = offsetLeft(parentMenu) - (contextMenu.clientWidth - parentMenu.clientWidth);
}else{
var contextMenuPosition = offsetLeft(parentMenu);
}
if(contextMenuPosition < 0){
contextMenu.style.left = 0;
}else{
contextMenu.style.left = contextMenuPosition;
}
}else{
contextMenu.style.left = offsetLeft(parentMenu);
var l_WindowWidth = document.body.clientWidth;
var l_DivWidth = contextMenu.clientWidth;
var contextMenuLeft = offsetLeft(parentMenu)
//alert("l_WindowWidth = " + l_WindowWidth)//
//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
//alert(contextMenuLeft);
if(l_WindowWidth < l_DivWidth + contextMenuLeft){
//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
contextMenu.style.left = l_WindowWidth - l_DivWidth;
}
}
contextMenu.style.height = 0;
var l_DivHeight = contextMenu.clientHeight + 2;
//-----Set The div top postion ------------------
var l_WindowHeight = document.body.clientHeight;
var l_ScrollTop = document.body.scrollTop;
//alert(l_WindowHeight);
//alert(document.body.scrollTop);
if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
contextMenu.style.top = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
//-------------------------------------------------
contextMenu.style.overflowY = 'hidden';
contextMenu.style.height = 0;
//contextMenu.style.display = "none";
var g_MaincontextMenu = "";
SetMainDiv(contextMenu);
BuildDiv(0, l_DivHeight);
}
}
var y="";
function SetMainDiv(p_MaincontextMenu){
g_MaincontextMenu = p_MaincontextMenu;
clearTimeout(y);
}
function BuildDiv(p_Height, p_HighHeight){
//alert(1);
//document.form2.strSearch.value = document.form2.strSearch.value + "," + p_Height + "," + p_HighHeight;
//document.form2.strSearch.value = document.form2.strSearch.value + "," + g_MaincontextMenu.id;
var l_contextMenu = g_MaincontextMenu;
//g_MaincontextMenu = "";
//alert(l_contextMenu);
//alert ("p_Height = " + p_Height);
//alert ("p_HighHeight = " + p_HighHeight);
//alert(l_contextMenu.id);
if (p_Height < p_HighHeight){
l_contextMenu.style.height = p_Height + 10;
//alert(p_contextMenu.clientHeight);
//alert(1);
y = setTimeout('BuildDiv(' + parseInt(p_Height + 10) + ',' + p_HighHeight + ');', 30);
//alert(2);
//alert(p_contextMenu.style.height);
}else{
clearTimeout(y);
//alert('Clear');
}
}
/*-----------------------------------------------------------------
Loaded the child of the submenus.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
------------------------------------------------------------------*/
function loadContextMenuSub(obj) {
var contextMenu;
var parentMenu;
//alert('loadContextMenuSub');
parentMenu = returnContainer(obj);
contextMenu = document.all[obj.id + "Sub"];
contextMenu.style.display = "block";
var l_contextMenu_Top = obj.offsetTop + parentMenu.offsetTop;
contextMenu.style.top = l_contextMenu_Top;
var l_DivHeight = contextMenu.clientHeight;
if (parentMenu.offsetLeft - contextMenu.offsetWidth + 1 < 0)
contextMenu.style.left = parentMenu.offsetLeft + parentMenu.offsetWidth - 7;
else
contextMenu.style.left = parentMenu.offsetLeft - contextMenu.offsetWidth + 7;
contextMenu.parentMenu = parentMenu;
parentMenu.subMenu = contextMenu;
//-----Set The div top postion ------------------
var l_WindowHeight = document.body.clientHeight;
var l_ScrollTop = document.body.scrollTop;
//alert(l_WindowHeight);
//alert(document.body.scrollTop);
if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
contextMenu.style.top = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
//-------------------------------------------------
}
/*-----------------------------------------------------------------
function that change the interface of the menu item on mouseover event.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
------------------------------------------------------------------*/
function menuOver(obj)
{
var parentMenu;
var subMenu;
var i;
parentMenu = returnContainer(obj);
for (i=0; i < obj.childNodes.length; i++)
{
obj.childNodes(i).className = obj.SubMenuTextClassOver;
}
if (parentMenu.subMenu != null && parentMenu != parentMenu.subMenu)
{
subMenu = parentMenu.subMenu;
while (subMenu != null)
{
subMenu.style.display = "none";
subMenu = subMenu.subMenu;
}
}
}
/*-----------------------------------------------------------------
function that change the interface of the menu item on mouseout event.
Parameters:
Name Description
-------------------------------------------------------------------
row The object
------------------------------------------------------------------*/
function menuOut(row)
{
var parentMenu;
var subMenu;
var i;
parentMenu = returnContainer(row);
if (parentMenu != row)
{
for (i=0; i < row.childNodes.length; i++)
{
//alert(row.childNodes(i).className);
row.childNodes(i).className = row.SubMenuTextClass;
}
}
var toElement = returnContainer(event.toElement);
var toHide = true;
if (toElement == null)
{
if (parentMenu.subMenu) parentMenu = parentMenu.subMenu;
while (parentMenu.parentMenu != null)
{
parentMenu.style.display = "none";
parentMenu = parentMenu.parentMenu;
}
}
else
{
while (toElement)
{
if (toElement == parentMenu)
{
toHide = false;
window.event.cancelBubble = true;
break;
}
toElement = toElement.parentMenu;
}
if (toHide)
{
subMenu = parentMenu.subMenu;
while (subMenu != null)
{
subMenu.style.display = "none";
subMenu = subMenu.subMenu;
}
}
}
}
function contextHighlightRow(obj)
{
var parentMenu;
var subMenu;
var i;
parentMenu = returnContainer(obj);
if (obj.selected == "false")
{
for (i=0; i < obj.childNodes.length; i++)
{
obj.childNodes(i).style.borderTop = "1px solid white";
obj.childNodes(i).style.borderBottom = "1px solid white";
if (obj.childNodes(i).cellIndex == 0 || obj.childNodes.length == 1)
{
obj.childNodes(i).style.borderLeft = "1px solid white";
}
if (obj.childNodes(i).cellIndex != 0 || obj.childNodes.length == 1)
{
if (obj.childNodes(i).cellIndex == obj.cells.length-1)
{
obj.childNodes(i).style.borderRight = "1px solid white";
}
}
}
if (parentMenu.subMenu != null && parentMenu != parentMenu.subMenu)
{
subMenu = parentMenu.subMenu;
while(subMenu != null)
{
subMenu.style.display = "none";
subMenu = subMenu.subMenu;
}
}
obj.selected = "true";
}
else
{
for (i=0; i < obj.childNodes.length; i++)
{
if (i == 0)
{
//obj.childNodes(i).style.borderTop = "1px solid " + obj.background;
obj.childNodes(i).style.borderTop = "1px solid white";
//obj.childNodes(i).style.borderBottom = "1px solid " + obj.background;
obj.childNodes(i).style.borderBottom = "1px solid white";
}
else
{
//obj.childNodes(i).style.borderTop = "1px solid " + obj.titlebar;
//obj.childNodes(i).style.borderBottom = "1px solid " + obj.titlebar;
obj.childNodes(i).style.borderTop = "1px solid white";
obj.childNodes(i).style.borderBottom = "1px solid white";
}
if (obj.childNodes(i).cellIndex == 0 || obj.childNodes.length == 1)
{
//obj.childNodes(i).style.borderLeft = "1px solid " + obj.titlebar;
obj.childNodes(i).style.borderLeft = "1px solid white";
}
if (obj.childNodes(i).cellIndex != 0 || obj.childNodes.length == 1)
{
if (obj.childNodes(i).cellIndex == obj.cells.length-1)
{
//obj.childNodes(i).style.borderRight = "1px solid " + obj.background;
obj.childNodes(i).style.borderRight = "1px solid white";
}
}
}
obj.selected = "false";
}
}
/*-----------------------------------------------------------------
function that return the parent of the item.
Parameters:
Name Description
-------------------------------------------------------------------
container The Item
------------------------------------------------------------------*/
function returnContainer(container)
{
if (container)
{
while (!container.menuElement)
{
if (container.parentElement)
{
container = container.parentElement;
}
else
{
container = null;
break;
}
}
}
return(container);
}
/*-----------------------------------------------------------------
Open new window
Parameters:
Name Description
-------------------------------------------------------------------
p_Id Category Id
*/
function loadCategoryFile(p_Id){
window.open ("OpenFileById.asp?Id=" + p_Id,"");
}
/*-----------------------------------------------------------------
Redirect function
Parameters:
Name Description
-------------------------------------------------------------------
lngCategoryID The CategoryID
------------------------------------------------------------------*/
function loadCategory(lngCategoryID)
{
window.location = "main.asp?lngCategoryID=" + lngCategoryID;
}
/*-----------------------------------------------------------------
Open Window
Parameters:
Name Description
-------------------------------------------------------------------
p_Url Url to Open
p_Width The Width of the window
p_Height The Height of the window
p_Resizable yes or no
p_Scrollbars yes or no
p_Status yes or no
p_Addressbar yes or no
p_Toolbar yes or no
------------------------------------------------------------------*/
function OpenNewWindow(p_Url, p_Width, p_Height, p_Resizable, p_Scrollbars, p_Status, p_Addressbar, p_Toolbar)
{
window.open(p_Url,"" ,"height=" + p_Height + ",width=" + p_Width + ",top=100,left=100,resizable=" + p_Resizable + ",scrollbars=" + p_Scrollbars + ",status=" + p_Status + ",location=" + p_Addressbar + ",toolbar=" + p_Toolbar);
}
/*-----------------------------------------------------------------
function that handling the onclick event
Parameters:
Name Description
-------------------------------------------------------------------
item The object that on click occured in
lngCategoryID The CategoryID
------------------------------------------------------------------*/
function clickMenu(item, lngCategoryID)
{
lngCategoryID = parseInt(lngCategoryID.substr(1));
switch (item.TypeRef)
{
case "1":
break;
case "2":
switch (item.TargetRef)
{
case "1":
window.open(item.Link);
break;
case "2":
window.location = item.Link;
break;
case "3":
parent.location = item.Link;
break;
}
break;
case "3":
window.location = "main.asp?lngCategoryID=" + lngCategoryID;
break;
case "6":
// item of the menu is a folder
window.location = "PublicLibrary.asp?lngCategoryID=" + lngCategoryID;
break;
case "8":
window.location = "DisplayNodeList.asp?lngCategoryID=" + lngCategoryID;
break;
}
}
//-------------------------------------------------------------------------
/*-----------------------------------------------------------------
Loaded the child of the submenus.
Parameters:
Name Description
-------------------------------------------------------------------
obj The object
------------------------------------------------------------------*/
function loadContextMenuSubRight(obj) {
//alert();
var contextMenu;
var parentMenu;
parentMenu = returnContainer(obj);
contextMenu = document.all[obj.id + "Sub"];
contextMenu.style.display = "block";
var l_contextMenu_Top = obj.offsetTop + parentMenu.offsetTop;
contextMenu.style.top = l_contextMenu_Top;
var contextMenuLeft = parentMenu.offsetLeft + parentMenu.offsetWidth - 7;
var l_WindowWidth = document.body.clientWidth;
var l_DivWidth = contextMenu.clientWidth;
//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
//alert(contextMenuLeft);
if(l_WindowWidth < l_DivWidth + contextMenuLeft){
//alert("l_WindowWidth = " + l_WindowWidth + " : l_DivWidth + contextMenuLeft = " + eval(l_DivWidth + contextMenuLeft));
contextMenu.style.left = l_WindowWidth - parentMenu.offsetWidth - l_DivWidth;
}else{
contextMenu.style.left = contextMenuLeft;
}
var l_DivHeight = contextMenu.clientHeight;
//-----Set The div top postion ------------------
var l_WindowHeight = document.body.clientHeight;
var l_ScrollTop = document.body.scrollTop;
//alert(l_WindowHeight);
//alert(document.body.scrollTop);
if(l_WindowHeight < (l_contextMenu_Top + l_DivHeight) - l_ScrollTop)
contextMenu.style.top = l_contextMenu_Top - ((l_contextMenu_Top + l_DivHeight - l_ScrollTop) - l_WindowHeight);
//-------------------------------------------------
contextMenu.parentMenu = parentMenu;
parentMenu.subMenu = contextMenu;
}
