It is quite easy to create a Horizontal menu with a Horizontal submenu like the one below if you can use the GoLive ShowHide Action.








The GoLive ShowHide Action can turn on and off the visibility of a floating box. Each MenuMachine menu is in a floating box and can be controlled by this Action.

The steps below show how this menu was made.

The menu system above is made up of four separate MenuMachine menus.

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

Note: MenuMachine menus will always be visible on initial page load in a browser. If you need to show no submenus initially, click here to see the modified version of this menu. You should still follow these instructions first and then move on to the modified page.

The picture below shows the four menu objects on the page, and the four Head Actions in the Head area. First we'll show how the menus are arranged, and then we'll set up the Actions.




1) Place the four menu objects on the page.
You may find it easiest to set up one menu then duplicate it by copying and pasting its floating box placeholder . That way, all the basic attributes of the menu are copied across saving some time.


2) Once the separate menus are configured with their menu items, drop-downs, colors, borders etc., they must be named, their visibility set and their correct position under the top menu set. This is done by selecting their floating boxes and setting the correct attributes in the Inspector.


3) Select each menu's floating box to invoke the floating box Inspector to show the Floating Box attributes. Give the menus different names by changing the default "bbML" name to something more relevant to your design.

In the picture at left, the floating box for the green submenu (shapes) has been selected, and has been dragged into the correct position beneath the top menu. In the Inspector we can see its floating box attributes. The coordinates of top:85px and left:6px can be seen. Visibility is on as this menu is to be visible when the page is loaded. In turn, select the other two menu floating boxes, colors and sizes, and manually enter the same coordinates (top:85px and left:6px) so they are in the same position as the shapes menu. Then change their visibility to off so they can't be seen. So now all that can be seen on the page is the top menu and the green shapes menu. See image below.

4) Once the menus are in position, we can set up the Actions that make the menus visible or invisible as required. It is easiest to plan these sorts of Action events on paper so you can easily see what is required on a Mouse Event such as Enter or Exit.

The desired effect is to display the submenu of shapes when the top menu item called Shapes is rolled over. When this happens, if the submenu colors or sizes was visible, it should now become invisible. When the mouse exits either the Shapes menu item, or the submenu, the submenu should remain visible.

Likewise for the two remaining top menu items. Their submenus must become visible if they are rolled over, and any other submenu should become invisible.

If we draw a simple table of what happens on a Mouse Event, we can plan the Actions that will be required. Below we can see than on a Mouse Enter event, three things must happen for each of the top-level menu items, therefore we know we must use a group of Actions on that event – hence an Action Group.

So we need a group of Actions for each top-level menu item that shows one submenu and hides the other two submenus. This means a group of three ShowHide Actions – Show, Hide, Hide. Plus we can use a group of Hide, Hide, Hide to get rid of all submenus at once (if required).


5) The menu on this page utilizes four Head Actions set to the On Call Event – one Head Action for each top-level menu plus the hideall Head Action. If there were four items in the top menu, therefore four menus below it, we would need one additional Head Action and so on.


6) To make the Action Group, drag a Head Action into the Head area of the page.

Then go to the Rollovers & Actions Window (GLCS) or Inspector (GL6) and name the Action something relevant (here it is "hideall"). Change the Head Action to load On Call in Events (GLCS) or Exec. OnCall (GL6). Then add an Action to the group. Choose ShowHide from the Multimedia list of built-in GoLive Actions. Set this ShowHide Action to Hide shapes. Then duplicate this Action (you can copy and paste) and change it to Hide colors. Duplicate this Action and change it to Hide Sizes. Now you have a group of Actions that can all be called at once.

7) Duplicate the Head Action Group in the head area (you can copy and paste) but this time change one of the Actions to Show a submenu. Then duplicate that Head Action Group and change another of the submenus to Show.


You should end up with four Head Action Groups, set up with three Actions each as below:

This is what one of the finished Head Action Groups would look like in the Rollovers & Actions window (GLCS) or Inspector (GL6):

GoLive CS		GoLive 6

8) Once the menu floating boxes are named and in place, and the Head Action Group items are set, now the Head Actions must be called by the top menu items to Show/Hide the relevant submenus when the top menu items are activated.

Select the top level menu to invoke the MenuMachine Inspector. In the tree area, select the menu item you want to attach the Action to. In this case it is the menu item "Shapes".


9) Click on the Call Action button in the MenuMachine Inspector. You will see the Edit Menu Actions dialog box. Choose the Action Group that you want to use for the selected menu item from the pull-down list next to the appropriate Mouse Event. In the image below, we have selected the menu item Shapes and we are linking the Head Action called showshapes to the Mouse Enter event.

10) Repeat step 9) for the other menu items. The setting used for the menu on this page 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.


That's it!


Note about using Actions: When you use Actions, GoLive copies a javascript library (CSScriptLib.js file) into the GeneratedItems folder. This file contains the code for ALL the GoLive Actions, and you really only need the code to the ones you have used in your site.

Choosing Flatten Script Library (under Site in the menu bar when the site window is active) reduces the size of the CSScriptLib.js file from around 74kb (GL6) or 88.7kb (GLCS) to a smaller size e.g. around 10kb or so. This will make the page load faster in a browser as the CSScriptLib.js file is called when the page loads.

You will need to do this every time you upload pages and the GeneratedItems folder after working on a page that contains Actions as GoLive re-copies the larger library into the GeneratedItems folder when you save a page with an Action on it.