Cascading Menu

To create the above cascading menu, first of all we have written two additional functions on this page which you would have to cut and paste on your own page. The functions are:

showStack('Panel Name 1, Panel Name 2, Panel Name 3...', x-coordinate, y-coordinate, overlap)

and

hideStack('Panel Name 1, Panel Name 2, Panel Name 3...')

The function of showStack is to stack the specified list of panels (i.e. Panel Name 1, Panel Name 2, etc) one on top of the other, starting at the position (x-coordinate, y-coordinate) and with the specified overlap between the panels.

The function of hidestack is to hide the list of panels (i.e. make invisible from the page).

Now consider the menu above in its initial state. In its initial state, it consists of four panels, A1o-B1-A2-A3 stacked one on top of the other.

Whereas in the menu maker we have specified altogether 7 panels, A1, A1o, A2, A2o, A3, B1 and B2. When the page first loaded, we called showStack("A1o,B1,A2,A3",20,10,1) to display the stack A1o-B1-A2-A3 at position (20,10).

Now, to create the effect of expanding/collapsing the menu when Item 2 or Item 3 is clicked, we have specifed the items in the menu maker in the following manner:

Panel=A1,100
!<b>Cascading</b>
Item 1
[+] Item 2^javascript:hideStack('A1,A2o,B2');showStack('A1o,B1,A2,A3',20,10,1);

Panel=A1o,100
!<<b>Cascading</b>
Item 1
[-] Item 2^javascript:hideStack('A1o,A2o,B1,B2');showStack('A1,A2,A3',20,10,1);

Panel=A2,100
[+] Item 3^javascript:hideStack('A1o,A2,B1');showStack('A1,A2o,B2,A3',20,10,1);

Panel=A2o,100
[-] Item 3^javascript:hideStack('A1o,A2o,B1,B2');showStack('A1,A2,A3',20,10,1);

so that when [+] Item 2 is clicked, it first hide the panels A1,A2o and B2, and then displays the stack A1o-B1-A2-A3. Similarly when [+] Item 3 is clicked, it first hides the panels A1o,A2,B1 and then displays the stack A1-A2o-B2-A3. And when [-] Item 2 or [-] Item 3 is clicked, the panels A1o, A2o, B1 and B2 are hidden, and only the stack A1-A2-A3 is displayed.

A simpler implementation is possible if you do not need the menu collapsing effect as in this case you can do without the panels A1o and A2o.

Thats all to creating cascading menus!

See Menu Maker input for this menu

See HTML for this page