[return to Part 1] |
[continue to Part 3] |
Designing menus using Cascadia
Now comes the fun part! Click on the Cascadia icon in the BitMotion component toolbar and then click and drag an area on the layout. When you're done, it should look similar to the screenshot below:
This is the placeholder for the Cascadia Menu component. The size it appears as on the layout will not directly correspond to the resulting size of the published menus. There are several reasons for this. First, each browser draws the menu slightly differently depending on whether you're viewing it in Internet Explorer, Netscape, Mozilla, or Opera. Additionally, since menus can be changed in so many ways you don't want the placeholder to be constantly changing shape and interfering with your other content. We'll get to the sizing of the placeholder later.
For now, notice that when you select the component on the layout, the component properties dialog is displayed, as shown below:
 |
To start editing the component, double-click on the line where it says Open Properties. The component dialog then appears. The dialog has been marked to indicate what each control does.
The best way to understand what all the controls are is to try them out and see how it all works. The controls are reiterated here:
- Create a new menu item: this adds a child menu below the currently selected item.
- Remove a menu item: deletes the currently selected item and all menus beneath it, if any.
- Move a menu item up: when you want to rearrange the order the menu items appear in, this button will move the menu item one position higher.
- Move a menu item down: same as above, but moves the menu item one position lower.
- Orientation: changes whether the menu is shown horizontally (all menu items side by side) or vertically (all menu items above and below each other).
- Menu close delay: sets the delay, in milliseconds, for how long the menu will be shown after the mouse leaves the menu. 1500 represents 1.5 seconds and 500 represents half a second.
- Close: closes the dialog and saves your settings.
Once you have added one or more items to the menu and you select an item, the options change to those shown below. Numbers in red have been added to this screen capture.
 |
An explanation of the numbered items in the image above follows:
Link box displays the currently selected link, if any.
Click on this button to select a new link using the standard Fusion link dialog. When linked, the displayed menu item will work as a standard web link to another web page.
Clicking this button unlinks the currently linked page.
Use this drop-down to select the link target.
The Label is what will appear on the published menu. When you enter a new value for the label, it will change on the tree structure when you select a different item on the tree.
The width setting controls how wide an individual menu item is. If the menu item is in a sub-menu with other menu items, this changes the width for every item in the sub-menu.
This drop-down allows you to choose the style you wish to use. Styles affect the color and formatting of the menu items.
Click on the "Edit Styles..." button to modify the styles.
The Sub Menu panel gives you exact control over how each sub-menu is to appear.
Now that you know the basics of what is involved, go ahead and play around. Add some menu items, some sub-menu items, change around the order, delete some. Get a feel for how everything works. Publish your page to see how it turns out.
Next you'll learn how to create your own styles.
[return to Part 1] |
[continue to Part 3] |
Copyright © 2003 BitMotion Software Inc. All rights reserved. "BitMotion" and the BitMotion logo are trademarks of BitMotion Software Inc.
