Articles in this section

How to create a cascading web menu

The Challenge

You want to add a navigation menu to your web site design with one or more levels of cascading sub-menus:

Description

GUI Design Studio provides built-in Menu Bar and Popup Menu elements but these are optimized for use in Windows applications and do not provide suitable styling for web-based applications:

Standard Menu Bar Element

Standard Popup Menu Element

Web menus require much more flexibility in styling and, also, the ability to link from items that also contain sub-menus.

Solution Overview

The solution is to build your web menu by layering other design elements to create whatever style you want. Typically, you will use a combination of Rectangles, Text Rectangles, Web Tabs, Bitmap Images and other Shapes.

To connect the menus and sub-menus together, you will need to use "Modal Choice Popup" navigations.

While the standard Windows menu elements have built-in rules for where the popups will appear, the software will have no idea where to place your custom menus (or, indeed, the fact that they are menus at all). So you will need to add Window Position Anchors (from the Storyboard panel) to indicate where the pop-ups should appear.

See the example, below, for step-by-step instructions.

Current limitation: The main caveat with menu systems in GUI Design Studio (at the moment), and this is also true of using the Windows menu elements, is that you will not be able to display the hierarchy simply by hovering over the items. Although there is support for mouse-over behaviour, it doesn't play nicely with Modal Choice Popups. Instead, you will need to click to open sub-menus. While not ideal, it is adequate for prototyping purposes where your main concern is content and structure.

Solution Example

1. Create a new design for your navigation menu.

2. Add a background Rectangle (or other suitable element) to hold the main navigation bar, and style it appropriately:

3. Add elements to represent the menu items. These could be simple Text elements, Text Rectangles or layers of any elements. For this example, I've used a single Text Link List element that allows easy editing of the items and maintains correct spacing between them:

4. Add Window Position Anchors below the menu items to specify where the drop-downs should appear. These need to be positioned manually and will need to be re-positioned if the menu items change at all:

5. Optionally, group all the elements together so that they all remain together when any of them are moved. Select them all and hit Ctrl+G (or use the "Group Elements" command from the right-click context menu):

Note: You will need to select and Ungroup the Window Position Anchors if you need to move them after changing menu items, then Group them back in afterwards.

6. Repeat for the drop-down menus. In this case, you will want to use individual elements for each menu item. Text Rectangles are best, or, if you're using version 4.3 or above, the new Shape elements will provide more flexibility in styling later. Remember to add Icons or other suitable elements and Window Position Anchors for any sub-menus, and Group them all together when complete:

7. When all the menus are complete, connect them up, taking care to connect to the background frame Rectangles of the drop-downs and not individual items within them. Use "Modal Choice Popup" as the Navigation Type:

8. Save the design.

9. Finally, drag and drop your navigation menu as a component from the Project File Tree onto any page design that will use it:

The Result

#1: This is what the basic design will look like when the prototype is run:

Alternative Styling

Once you've got the overall menu structure and content about right, you can start to spend a bit more time tweaking and testing the style if that's appropriate.

#2: The same menu design with different colours applied, borders turned on for the menu items and a few positional tweaks:

#3: The following tweak replaces the menu bar text with tabs, uses a background image for the drop-down menus and consolidates the second-level sub-menus into the first:

Here's the CascadingWebMenu3.gui design:

One more thing...

For simplicity, this design has not included any links to other pages. To do this, simply drag and drop the target pages from the Project File Tree onto the menu design using the right mouse button to create Thumbnail Components, then connect the associated menu items to them using "Replace Top Window" navigations.

Additional Tips

If your menu items are all the same height (25 pixels in this example), it's easier to adjust the size of the outer menu rectangle, to accommodate more or fewer items, by changing the height (in multiples of 25) directly within the property editor rather than dragging the resize handles then fiddling with the size to get it right.

For simplicity, the whole menu structure has been placed on one design for this example. It can be better to place each drop-down menu in its own component design file. This prevents the overall design from getting cluttered with multiple levels of sub-menus (at the expense of being able to see the whole structure on one design) and hides the navigation links to the actual web pages (not included in this example).

Attachments

The design files in this example are attached below, individually and together as a ZIP file: