webCommunicator
Reference Guide

Previous Page | Next Page

menubar
CLPad

Dynamic Menu Styles

A dynamic menu allows users to view site hierarchy (parent pages and sub-pages) from the navigation bar. When the mouse is placed over a menu item, a sub-menu rolls out for that page. Sub-menus will appear down to ten levels deep. Please note that dynamic menus only work with version four browsers and up.

The following lists will describe the fields and options available when creating your dynamic menu. As you will see, there are a number of text-related fields that you have already learned about in Text Properties that will not be described here.

General Properties

General Properties contains fields and options that are relevant to both top level items and sub-menu items.

  • Menu Type: Select where you would like your menu to appear. You may choose from Vertical (which runs down the left sidebar of your page) or Horizontal (which runs along the top of your page underneath your header). Note: Horizontal Menus limit the number of menu items that you  can fit into your navigation bar.
  • Menu Location: Determines where the menu should be placed. For vertical menus, the left settings determines the left margin. For horizontal menus, the left and top settings represent the location relative to the top left corner of your browser. If you have used a custom header, be sure to keep in mind the height measurements so that you can accurately determine where you would like your menu to fall. If you are unsure about how far a pixel is, try setting up a horizontal menu using 120 pixels for the Top value and 20 pixels for the Left. Save your settings and preview the page. This will give you a feel for the measurement. These settings can be changed without difficulty and updated within moments.
  • Border Width: If you wish, set the width of the border around the menu item here.
  • Border Between Links: Select "Yes" if you wish to have a border between each menu item. If not, than select "No".
  • Align Menu Text: You may choose to align the menu text left, right or center within the box. For the maximum clarity in your navigation menu, we recommend you choose center.
  • Align Menu: Set the alignment of your menu items here.
  • Left Padding: Designate the space (in pixels) between the left edge of the menu item and the text.
  • Top Padding: Designate the space (in pixels) between the top edge of the menu item and the text. Enter -1 to center the text vertically.

Top Level Properties

These settings will control the appearance of your menu items. Some of the fields require a second colour or image for when the mouse hovers over top of the menu item.

  • Background Image: Instead of using just solid colour behind your menu items, webCommunicatior allows you to insert an image! This helps create a clean and modern looking navigation bar. Simply turn the background image on and browse your file system for an image to use.
  • Background Colour: Select colours to use as the menu items' background if you are not going to use a background image.
  • Border Colour: If the Border Between Links option in the General Settings above is set to "Yes", enter the border colour here.
  • Menu Item Height: Regulates the height of the box surrounding the menu link text. Try to keep it narrow, but in proportion to the width. You don't want the link to appear too boxy, but you also don't want it too thin! If you set the width at 20 pixels, try 8 or 9 pixels as the height.
  • Menu Item Width: Indicate how wide you would like your menu items. Items in a dynamic menu appear in boxes. For vertical menus, be sure to keep in mind the width of your left sidebar - the menu items should be less wide than your sidebar. A menu size 30 pixels less than the sidebar is a good ratio.

Sub Level Properties

Filling in these fields will control the sub-menus' appearance. The properties in this section are indentical to the Top Level Properties.

When you have finished, press "Update Dynamic Menu Styles" to save your settings. From there you may go to your website to view the dynamic menu you have created. You can always return if you wish to make any changes.