Multiple menus

MenuMachine has the ability to work with multiple menus on the same page.

This means you can have, for example, a horizontal menu across the top of the page as well as a vertical menu on the left.

Placing multiple menus is as simple as dragging a second (or third) menu object onto the page. Each menu can be independently edited by selecting the menu and then using the MenuMachine Inspector.

Z-Index

When using multiple menus, it is important to understand floating box layering. Each MenuMachine menu is in its own floating box. You can manually control floating box layer orders by changing the Z–Index of the floating boxes on your page.

Why would you want to do this you ask? You may want one menu to overlap another one. To do this you can either re-arrange the floating box placeholders of the menus on the page, or manually control which menu is "in front" of the other.

The Z–Index is an arbitrary number that controls the stacking of floating boxes: basically, the higher the number, the closer the floating box will be to the "top" of the stack. The floating box which is "higher" in the stack can obscure objects "below" it.

By default, all MenuMachine menus have a Z-Index value of 1000.

When floating boxes have the same Z-Index, the floating box whose placeholder is further down the page will be the one which appears "in front".

By now you are used to seeing the floating box placeholder for a MenuMachine menu at the base of your page in Layout view. If you have two menus on your page you will see two little yellow boxes at the base of your page:

(e.g. this is Menu 1's placeholder)
(this is Menu 2's placeholder)

In the above example, Menu 2 would overlap or be on top of Menu 1, simply because its placeholder is after the placeholder for Menu 1 in the page code.

Changing the Z-Index values to control the layer ordering

Here is an example of two separate menus. The top black menu has been given a higher Z-Index value (1000) than the purple menu (Z-Index 500) so the black menu overlaps the purple one. Try rolling your cursor over it to see how it overlaps.





To manually change the MenuMachine floating box Z-Index to achieve the layer order you want, click on the yellow placeholder or select the floating box border (around the menu) to see the floating box inspector.

In the above illustration, the first floating box placeholder is selected which is the purple menu. The Z-Index value has been changed to 500. The black menu has the default MenuMachine Z-Index of 1000 so it is now at the top of the "stack".

Remember, the higher the Z-Index, the closer to the "top" of the stack or "higher" the menu will be pushing it in "front" of the other floating boxes or menus!

NOTE: You can manually control the order of floating boxes (each MenuMachine menus is in a floating box) but you can't push floating boxes in front of some special elements.

These special elements are Flash animations, Quicktime movies, Java applets or Forms. The menu always appears behind these elements.

This is a problem (bug) in a variety of web browsers. Basically, these browsers "force" the plugin or form object to the front. All other content, including floating boxes will appear behind the plugin object.

Because MenuMachine menus are built using Dynamic HTML, they are affected by this issue. This problem affects all DHTML menu systems, not just MenuMachine ones.

There is no workaround apart from designing the page so that the plugin object does not conflict with or overlap the menu.