Displaying submenus using v5 and existing menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:18

Displaying submenus using v5 and existing menu_date.js

Poster: Tom
Dated: Thursday August 21 2003 - 23:31:08 BST

I have a small problem . . .

With v3, we display the navigation bar horizontially with drop downs functioning as they should. Also, when a user entered a certain level of the site, we also display the submenu specific to the area on the left side of the screen by referencing the same array. This was done with the following script:

Code:

<script language="JavaScript">
// ****** CHANGE currentMenu TO THE CURRENT SUBPAGE NAME ACCORDING TO THE MENU ARRAY (menu_array.js) *******

var currentMenu = getMenuByName("<% = testhdr(2) %>");
var subNavValues= new Array;
var counter= 0;
var tmenu=eval("menu"+currentMenu)//pulls subnav from the menu array (menu_array.js)
var subNavLength = tmenu.length;

//creates the subnav array
for (var s = 22; s < subNavLength; s++){   
   if(s==(subNavLength-5)){
      subNavValues[counter] = tmenu[s];
      subNavValues[counter+1] = tmenu[s+1];
   } else{
      subNavValues[counter] = tmenu[s]; 
      subNavValues[counter+1] = tmenu[s+1];
   }
   s=s+4;
   counter=counter+2;
}

//function that writes out code for the subnav
function subNav(){
   var re1;
   var re2;
   var realLink;
   for (var i = 0; i < subNavValues.length; i++){
      re1 = /http:/i;
      re2 = /target=_blank/i;
      document.write("<TR><TD>")
      if((subNavValues[i+1].search(re1) != -1) && (subNavValues[i+1].search(re2) != -1)) {
         realLink = subNavValues[i+1].slice(subNavValues[i+1].search(re1),subNavValues[i+1].search(re2)-1)
         document.write("<div class=\"subNav\" onmouseover=\"subRoll('subNav" + i + "', 0)\"  onmouseout=\"subRoll('subNav" + i + "', 1)\" onclick=\"document.location.href='" + realLink + "'\" ID=\"subNav" + i + "\"><a href=\"" + realLink + "\" target=\"_blank\" class=\"subNav\">" + subNavValues[i] + "</a></div>")   
      } else {
         document.write("<div class=\"subNav\" onmouseover=\"subRoll('subNav" + i + "', 0)\"  onmouseout=\"subRoll('subNav" + i + "', 1)\" onclick=\"document.location.href='" + subNavValues[i+1] + "'\" ID=\"subNav" + i + "\"><a href=\"" + subNavValues[i+1] + "\" class=\"subNav\">" + subNavValues[i] + "</a></div>")
      }
      document.write("</TD></TR>")
      i++;
   }
}

//subnav rollover function
function subRoll(activeNav, state){
   subActive = document.getElementById(activeNav);
   if(state==0){
      subActive.style.backgroundColor = "#FFFFFF"; //rollover color
   } else {
      subActive.style.backgroundColor = "#DCDCDC"; //base color
   }
}
      
subNav();
</script>

The "testhdr(2)" value is the name of the menu array, pulled from the corresponding directory name.

My question is how do you accomplish the same task in v5?

To get a clearer picture of what we are doing, go to http://www.alliedpilots.org/Public/AboutAPA/default_index.asp - this is still running v3.

We are hoping to switch to v5 soon, not only for the advantages in speed but also to support the Safari users of the site.

Any help on this woruld be greatly appreciated!

Regards,

Tom Dodd

Industrial Strength JavaScript and DHTML Menus

Displaying submenus using v5 and existing menu_date.js