Menu Bar Action

Documentation Freeway
1
Note: We recommend that you use the CSS Menus Action rather than the Menu Bar Action to create navigation menus as it is far easier to use, quicker to set up and more feature-rich.

Type of Action: Item Action (to use it, select a table item and go to Item>Actions to choose the Action from the list).

What the Action can do: This Action lets you do the following:
  • It lets you create a drop-down-and-fly-out navigation bar with links to pages of your site
A Menu bar is created from a table that has the Menu Bar Action applied. This is what we call the "Menu Bar Table". Sub-menus are contained within a second table item, which is selected in the Menu Items (table) popup of the Menu Bar Action palette. To enter the sub-menu text, you simply need to type the text with normal Returns between each sub-menu text link - you don't need to use a separate table cell for each, they should all be used within the same table cell to display the ones you want to be triggered when the main menu which corresponds to the same row or column is moused over.

The contents (usually text) of the tables form the titles of the menus, while the attributes of the table (its position, color, cell-spacing, etc.) control the appearance of the menu bar item itself. (See Working With Tables for further information on manipulating tables.)

To use the Action you first need to draw a table item on your page. In Freeway Pro you can simply click on the Table tool and draw an item on your page. In Freeway Express you need to click and hold on the HTML tool button, choose Table then draw an item on the page.

Note that to make a horizontal navigation menu you need to draw a table using one row and as many columns as you wish to have for your main menus. For a vertical menu, draw a table of one column with as many rows as you wish to have for your main menus. Make sure the settings for Cell Spacing, Cell Padding and Border of the table are all set to zero. In the event that you have a table with a single cell the Menu Bar Action will always create a horizontal menu.

Apply color to the table in the normal way, then add text inside each of the table cells and style the text as you want it to display.

With the table item selected on your page, go to Item>Actions and choose Menu Bar. With the item selected on the page you can see the options in the Actions palette.


  • Link: Choose the color you wish to use for the Normal state of the main menu text contained within the cells of the table in this popup.
  • Hover: Choose the color you wish to use for the Hover (or MouseOver) state of the main menu text contained within the cells of the table in this popup.
  • Highlight: Choose the color you wish to use for the background of the main menu cells when they are hovered over.
  • Underline links: Choose whether you want the hyperlinks in both states to be underlined or not in your main menus. Checking this option will apply underlines to the links.
  • Further options available for layers: Freeway Pro users can select the table and switch on the Layer option in the Inspector to reveal two additional Background options. The first popup lets you apply a color to the background of the entire table (rather than just a cell inside the table) and the second popup lets you embed a graphic in the background of the table.
  • Menu Items (table): Click and hold on this popup to choose the second table item on your page which contains the sub-menu items for your menu bar.
Once you have chosen the second table in the Menu Items (table) popup, you will see an addition set of options in the Actions palette:



  • Link: Choose the color you wish to use for the Normal state of the sub-menu text contained within the cells of the table in this popup.
  • Hover: Choose the color you wish to use for the Hover (or MouseOver) state of the sub-menu text contained within the cells of the table in this popup.
  • Highlight: Choose the color you wish to use for the background of the sub-menu cells when they are hovered over.
  • Underline links: Choose whether you want the hyperlinks in both states to be underlined or not in your sub-menus. Checking this option will apply underlines to the links.
  • Border: Choose whether you want to use a border around each sub-menu items by choosing a pixel width and a color.
  • Appearance: If you want to, you can choose from one of the preset themes in this popup (or if you have created your own set of custom images you can choose the folder of images containing the relevant files - see later).
  • Arrow and Background will be greyed out and inactive unless you choose to use a set of custom images (and Arrows are only used to denote hierarchical menus in predefined sets).
Note: Because this Action uses HTML text, the text will display with the standard inter-paragraph spacing between the vertical lines of text. In Freeway Pro you can set up a custom CSS text style to control this spacing by setting the Space After attribute to 0px then setting the Space Before to a set value (such as 3px). Doing this will mean that you have full control over the spacing between each line used in dropdown menus. Unfortunately, Freeway Express users cannot control the space, so it will appear with the standard HTML inter-paragraph spacing.

Once the second table has been set up (and selected in the Menu Items (table) popup) you will see that when you preview the menu the sub-menus automatically appear when the main menu is hovered. You don't need to place the second table underneath the first table (ie, the one with the Menu Bar Action applied to it) - you can place the second table on your pasteboard if you wish, as it will still work as it should.

Creating hierarchical menus

For the first level of sub-menus you simply need to enter the text in the table cells - but if you want to use sub-sub-menus or sub-sub-sub-menus, etc., you need to enter a "+" character in front of the text to denote each level of sub-menu you wish to use.



We recommend that you don't use too many levels of hierarchical sub-menus as it can be confusing and difficult to use for site visitors.

Using custom images

The Menu Bar Action is installed with a number of predefined appearances for the background and arrow images used in Menus. If you want to use your own images you can do so. If you have sets of images (backgrounds and arrow symbols) that you use frequently you can create a folder and select this folder rather than the individual files.

Create two graphics - one for the menu background and one for the arrow symbol. You should make GIF, JPEG, or PNG images only.

Name these images as follows:
Menu Background: bg.gif, bg.jpeg, or bg.png
Menu Arrow: arrow.gif, arrow.jpeg, or arrow.png

In the Appearance popup menu choose Select Folder… and in the resulting dialog choose the folder in which the images are to be stored.