If you want no submenus to be visible when the page first loads in a browser, you must create a "blanking" layer above the other submenus.
To the menu on the previous page, we have added a new menu, with one single menu item which is the same width as the other submenus. It has a background color the same as that of this page so it "hides" the submenus beneath it.
The new menu layer has a higher Z-Index value so it loads "above" the other submenus.
Then we modify each of the four Head Action Groups to add an Action to Hide the new layer whenever any of the other submenus are activated.
The steps below show how this menu was made.
The menu system above is made up of four separate MenuMachine menus plus the new "blank" menu.
These are:
(Bold indicates the name of the floating box the menu is in)
1. top - Three menu items : Shapes : Colors : Sizes
2. shapes - the green menu which sits just below top
3. colors - the blue menu which sits just below top
4. sizes - the purple menu which sits just below top
5. blank - a menu with one item which has the same background as the page, sits "over" the other submenus to hide them
Our table representing the Actions we need to assign is now modified to include the new layer.
|
Shapes |
Colors |
Sizes |
X |
| Mouse Click |
Do Nothing |
Do Nothing |
Do Nothing |
Do Nothing |
| Mouse Enter |
Show shapes submenu
Hide colors submenu
Hide sizes submenu
Hide blank submenu |
Hide shapes submenu
Show colors submenu
Hide sizes submenu
Hide blank submenu |
Hide shapes submenu
Hide colors submenu
Show sizes submenu
Hide blank submenu |
Hide shapes submenu
Hide colors submenu
Hide sizes submenu
Hide blank submenu |
| Mouse Exit |
Do Nothing |
Do Nothing |
Do Nothing |
Do Nothing |
You should end up with four Head Action Groups, set up with four Actions each as below:
| Head Action Group name > |
showshapes |
showcolors |
showsizes |
hideall |
| Action 1 |
shapes:Show |
colors:Show |
sizes:Show |
shapes:Hide |
| Action 2 |
colors:Hide |
shapes:Hide |
colors:Hide |
colors:Hide |
| Action 3 |
sizes:Hide |
sizes:Hide |
shapes:Hide |
sizes:Hide |
| Action 4 (new) |
blank:Hide |
blank:Hide |
blank:Hide |
blank:Hide |
The setting used for the menu items in the top menu remain the same as previous and are:
The menu item "Shapes" calls the Action showshapes on Mouse Enter.
The menu item "Colors" calls the Action showcolors on Mouse Enter.
The menu item "Sizes"calls the Action showsizes on Mouse Enter.
The menu item "X" calls the Action hideall on Mouse Enter.
|
