A Multidimensional Array for Horizontal Web Page Menus

Introduction
This is part 2 of my series, Commercial Horizontal Web Page Menus. In the previous part of the series, I described the example menu, we shall use. In this part of the series I show you the JavaScript multidimensional array for the example.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Nature of the Multidimensional Array
There is just one multidimensional array. It is an irregular multidimensional array. If you do not understand JavaScript Multidimensional array, then you should read my article titled, JavaScript Multi-Dimensional Array, which I wrote in this blog. To arrive at the article, just type the title and my name, Chrys, in the Search Box of this page and click Search; if on this page, you have the Google Search box, use it.

Each menu row has an array, in the multidimensional array. The most important features of a hyperlink are the href attribute and the hyperlink (A) element content. Each array element of the multidimensional array is a string made up of the href value and link content for a particular hyperlink; the href attribute value and the link content are separated by a comma.

Creation of the Multidimensional Array
In the code the multidimensional array is created as follows:

lArr = new Array();

The name of the array is, lArr. You start a multidimensional array just as you start a one-dimensional array. The array becomes multidimensional as you add other one-dimensional arrays to it.

The Main Menu Array
The main menu is the first row of the rows of menu items. This row is always displayed. As said in the previous part of the series, this main menu has 4 hyperlinks. This is the array (component of the multidimensional array):

lArr[0] = "http://www.item0.htm, Link for Item 0";
lArr[1] = new Array();
lArr[2] = new Array();
lArr[3] = "http://www.item3.htm, Link for Item 3";

As you can see, the element for index [0] is a string with href value and link content for the first hyperlink of the main menu. The element for index [1] is an array. The JavaScript code as written, will display the first element of the new array as the element for index [1] above. The element for index [2] is an array. The JavaScript code as written, will display the first element of this other new array as the element for index [2] above. The element for index [3] is a string whose content is the href value and link content of fourth element of the main menu.

I hope you see how the multidimensional array is developing. We already have two arrays added. For any array, any menu item that has a sub menu is a new array as in the above case. The first element of the new array will be the element (string) for the index of the array.

Each effective element of the multidimensional array is a string having an href value and link content separated by a comma.

As you can see the second and third elements of the main menu array are arrays. The main menu and sub menus, each has four hyperlinks. Each string in the multidimensional array represents a hyperlink. An array, which would not produce a sub menu, has four elements (strings).

Each new array such as the two above has five elements (strings). The first element of the five is actually the string for the index of the parent array it is rooted from. The rest of the four elements are for the four hyperlinks of the sub menu. This principle goes down the multidimensional array system (tree).

The arrays for the above two sub menus are:

lArr[1][0] = "http://www.item1.htm, Link for Item 1";
lArr[1][1] = "http://www.item11.htm, Link for Item 11";
lArr[1][2] = new Array();
lArr[1][3] = new Array();
lArr[1][4] = "http://www.item14.htm, Link for Item 14";

lArr[2][0] = "http://www.item2.htm, Link for Item 2";
lArr[2][1] = "http://www.item21.htm, Link for Item 21";
lArr[2][2] = new Array();
lArr[2][3] = new Array();
lArr[2][4] = "http://www.item24.htm, Link for Item 24";

Note that each of the above two arrays has two sub menus and two corresponding (sub) arrays. The two arrays of the former array above are:

lArr[1][2][0] = "http://www.item12.htm, Link for Item 12";
lArr[1][2][1] = "http://www.item121.htm, Link for Item 121";
lArr[1][2][2] = "http://www.item122.htm, Link for Item 122";
lArr[1][2][3] = "http://www.item123.htm, Link for Item 123";
lArr[1][2][4] = "http://www.item124.htm, Link for Item 124";

lArr[1][3][0] = "http://www.item13.htm, Link for Item 13";
lArr[1][3][1] = "http://www.item131.htm, Link for Item 131";
lArr[1][3][2] = "http://www.item132.htm, Link for Item 132";
lArr[1][3][3] = "http://www.item133.htm, Link for Item 133";
lArr[1][3][4] = "http://www.item134.htm, Link for Item 134";

The two arrays of the later (before the above pair of arrays) array above are:

lArr[2][2][0] = "http://www.item22.htm, Link for Item 22";
lArr[2][2][1] = "http://www.item221.htm, Link for Item 221";
lArr[2][2][2] = "http://www.item222.htm, Link for Item 222";
lArr[2][2][3] = "http://www.item223.htm, Link for Item 223";
lArr[2][2][4] = "http://www.item224.htm, Link for Item 224";

lArr[2][3][0] = "http://www.item23.htm, Link for Item 23";
lArr[2][3][1] = "http://www.item231.htm, Link for Item 231";
lArr[2][3][2] = "http://www.item232.htm, Link for Item 232";
lArr[2][3][3] = "http://www.item233.htm, Link for Item 233";
lArr[2][3][4] = "http://www.item234.htm, Link for Item 234";

In the example (described in the previous part of the series), there are seven menus. So we have seven arrays. The main menu corresponds to the top-most level array. All the arrays form a multidimensional array. Each array corresponds to a horizontal bar menu. The complete code including the arrays will be given to you at the end of the series.

Let us stop here and continue in the next part of the series.

Chrys