Menu
I’m creating a site and I would like to use a javascript from [url]http://javascript.internet.com
This is the original nav.htm with my menu items:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! [url]http://javascript.internet.com
<!– Original: Arun kumar (
<link href=”CascadeMenuNav/CascadeMenuNav.css” rel=”stylesheet”>
<script language=”javascript” src=”CascadeMenuNav/CascadeMenuNav.js”>
</script>
</HEAD>
<BODY OnLoad=”InitMenu()” Onclick=”HideMenu(menuBar)” ID=”Bdy”>
<div id=”Layer1″ style=”position:absolute; left:11px; top:184px; width:762px; height:140px; z-index:1; visibility: visible;”></div>
<FONT color=”#003399″>
<tr>
<td><table width=”762″ border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”138″> </td>
</tr>
</table> <DIV Id=”menuBar” class=”menuBar”>
<DIV Id=”Bar1″ class=”Bar” menu=”menu1″>About Us</DIV>
<DIV Id=”Bar2″ class=”Bar” menu=”menu2″>Traction Power</DIV>
<DIV Id=”Bar3″ class=”Bar” menu=”menu3″>Catenary</DIV>
<DIV Id=”Bar4″ class=”Bar” menu=”menu4″>Customer Service</DIV>
<DIV Id=”Bar5″ class=”Bar” menu=”menu5″>EMC Traction</DIV>
<DIV Id=”Bar6″ class=”Bar” menu=”menu6″>Contact Us</DIV><br></DIV>
<!–MenuItem Definition –>
<div Id=”menu1″ class=”menu” >
<div Id=”menuItem1_1″ class=”menuItem” title=”history”>History</div>
<div Id=”menuItem1_2″ class=”menuItem” title=”capabilities” cmd=”
<div Id=”menuItem1_3″ class=”menuItem” title=”projects” cmd=”http://www.wdvl.com”>Projects</div>
<div Id=”menuItem1_4″ class=”menuItem” title=”photos” cmd=”http://www.wdvl.com”>Photo Gallery</div>
<div Id=”menuItem1_5″ class=”menuItem” menu=”menu7″>Literature</div>
</div>
<div Id=”menu2″ class=”menu”>
<div Id=”menuItem2_1″ class=”menuItem”>T.P.S.S. Products</div>
</div>
<div Id=”menu3″ class=”menu”>
<div Id=”menuItem3_1″ class=”menuItem”>O.E.G. Products</div>
<div Id=”menuItem3_2″ class=”menuItem”>O.C.S. Catalog</div>
</div>
<div Id=”menu4″ class=”menu”>
<div Id=”menuItem4_1″ class=”menuItem”>Advocates</div>
<div Id=”menuItem4_2″ class=”menuItem”>Training</div>
<div Id=”menuItem4_3″ class=”menuItem”>Field Technicians</div>
</div>
<div id=”menu5″ class=”menu”>
<div Id=”menuItem5_1″ class=”menuItem”>Capabilities</div>
<div Id=”menuItem5_2″ class=”menuItem”>EMC Traction Website</div>
</div>
<div id=”menu6″ class=”menu”>
<div Id=”menuItem6_1″ class=”menuItem”>IMPulse NC</div>
<div Id=”menuItem6_2″ class=”menuItem”>Sales Representatives</div>
</div>
<div id=”menu7″ class=”menu”>
<div Id=”menuItem7_1″ class=”menuItem”>Brochures</div>
<div Id=”menuItem7_2″ class=”menuItem”>Product Bulletins</div>
<div Id=”menuItem7_3″ class=”menuItem”>Instruction Manuals</div>
<div Id=”menuItem7_4″ class=”menuItem”>Traction Newsletters</div>
</div>
<!– End of Menu –></td>
</tr>
</FONT>
</body>
</html>
This is the CascadeMenuNav.js code:
function InitMenu()
{
var bar = menuBar.children
for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = “hidden”
bar[i].onmouseover = new Function(“ShowMenu(“+bar[i].id+”)”)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)
if(menuItem.menu != null)
{
menuItem.innerHTML += “<Span Id=”+menuItem.id+”_Arrow class=’Arrow’>4</Span>”
//var tmp = eval(menuItem.id+”_Arrow”)
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth – 15
FindSubMenu(menuItem.menu)}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function(“Do(“+menuItem.id+”)”) }
menuItem.onmouseover = new Function(“highlight(“+Items[j].id+”)”)
}
}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = “hidden”
var menuItem = eval(Items[j].id)
if(menuItem.menu!= null)
{
menuItem.innerHTML += “<Span Id=”+menuItem.id+”_Arrow class=’Arrow’>4</Span>”
// var tmp = eval(menuItem.id+”_Arrow”)
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right – tmp.offsetWidth – 15
FindSubMenu(menuItem.menu)
}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function(“Do(“+menuItem.id+”)”) }
menuItem.onmouseover = new Function(“highlight(“+Items[j].id+”)”)
}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className=”barOver”
menu.style.visibility = “visible”
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}
function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = “menuItem”
}
}
obj.className=”ItemMouseOver”
window.defaultStatus = obj.title
ShowSubMenu(obj)
}
function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)
}
function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children
for(var j =0;j<child.length;j++)
{
if (child[j].className==”barOver”)
{var bar = eval(child[j].id)
bar.className=”Bar”}
if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)
childMenu.style.visibility = “hidden”
}
}
}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = “visible”
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left – menu.offsetWidth
}
}
///////////////////CascadedDropdown Menu/////////////////
//Date : 08/09/2001 //
//Version : 1.0 //
//Author Mr.Arun N Kumar //
//EMail: [email][email protected]
/////////////////////////////////////////////////////////
// Modifications on this code is not recomended
// Suggestions are welcome
What kind of problems will I run into? Any advise will be greatly appreciated!
Thanks