The Menu-And-Submenu set you see above is an example of Drop-Down menus created using DHTML Actions in NetObjects Fusion 3.x and higher.   The key to its functionality is the use of individual Layout Areas for each “sub-menu”.  This menu is designed so that when the mouse is placed on a “Main Menu” item, the “Submenu” will appear and remain visible until an item from that “Submenu” is selected, another “Main Menu” item is selected, or the mouse is moved out of the “Submenu” area.

Note: When you mouse out of the Submenu areas, they can “stick” and thus, still be visible.

Please note: This effect requires that you use the “CSS-P and Layers” HTML Output setting (“CSS and Layers” in NOF 3.0)
(Other functionality is possible with some minor modifications to the instructions below.)

Here´s how to do it:

1. Create a Layout Region on your page for your “Main Menu” - this is the menu which will appear when the page first loads. Populate this region with your Main Menu image or images.
    
2. Create a Layout Region for each “Sub Menu” - these are the menus which will appear when you Mouse Over one of the Main Menu selections. Populate these SubMenus with the image or images you will use for the SubMenus.
    
3. Create the “Hide Menu” Custom Message by starting an action:

   When -> Custom -> Edit... (click on the “+” button and create an action called “HideMenus”, then click “OK”, then click the “Cancel” button. NOF will retain this new Custome Message)

4. For each “Main Menu” item (individual image or hotspot), create the following Actions:

   When -> Mouse ->Mouse Over Target -> (Entire Page Layout) Message -> Custom -> HideMenus

   and check the “Cascade Message” button for the above action.
   and also...

   When -> Mouse -> Mouse Over Target -> (Submenu Layout) Message -> Object -> Show

   and check the “Cascade Message” button for the above action.
   
5. For each Submenu Layout Area, also create the following actions:
   

   When -> Custom -> HideMenus Target -> (Submenu Layout) Message -> Object -> Hide

   and check the “Cascade Message” button for the above action.
   
   and also...

   When -> Mouse -> Mouse Out Target -> (Submenu Layout) Message -> Object -> Hide

   and check the “Cascade Message” button for the above action.
   
   and also...

   When -> Object -> Shown Target -> (Submenu Layout) Mesage -> Object -> Bring to Front

   and check the “Cascade Message” button for the above action.
   
   ... where submenu is the submenu for the “Main Menu” item you have selected.... which will make sure that the submenu isn´t overlapped by anything when it appears.
   In addition, make sure to have the option:`Objects initially visible in browser' unchecked for all the SubMenu Layout Regions.
   
6. At this point, you can add rollover functionality to any of the buttons if you´d like (see the Rollover Action Page for details) and congratulate yourself - you´ve got a menu bar!

Click here to download a one-page template of this page.
(Template created in v4.)

Have a question that you can´t find the answer to? Want to report a possible bug?

Send a help request to NetObjects Technical Support

Go Back to Previous Page

Note:  All Actions described in this section have been tested with Fusion 3.x, 4.x, 5.x and MX.
           Actions will not currently work properly when viewed with Netscape 6.0