CSS Menus Action for Freeway 6 and earlier

13th of February, 2013

Important: If you are using Freeway 7, please see the KnowledgeBase article specifically for that version - as there are many new features which only appear in FW7 and later.

Type of Action
: Item Action (to use it, select an item containing list text 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 set up a drop-down-and-fly-out navigation menu very quickly and easily with multiple levels of sub-menu, sub-sub menu, etc.
  • It lets you set a "Current Page" state for the navigation menu to give the visitor a visual cue for which page they are currently viewing.
Freeway offers a powerful yet quick and simple way to create reliable and elegant “drop-down-and-fly-out” navigation menus using CSS—making them quick to load, fast in operation and Accessibility-friendly for visitors with disabilities. The menus will even display if the visitor has JavaScript turned off in their browser.



The CSS Menus Action is applied to an HTML item and this item must only contain “list” text. To create a CSS Menu, draw an HTML item on your page, go to the Inspector, open the List panel at the foot of the General Settings tab of the Inspector by clicking on the disclosure triangle on its header bar and click on the right arrow once. Any text you type will now be formatted in the HTML list style. Don’t worry about entries in the list displaying with bullets, they won’t display with bullets in the finished CSS Menu.

A “nested list” is text within a list which has varying list levels applied. The level of a list item determines whether the word(s) of a list entry will be used as a main menu, a submenu or a submenu of a submenu, etc., of the CSS Menu. If you want to make an entry in your list a submenu of another, simply click on the right arrow again in the List panel of the Inspector.



To go back a level in your list you need to click on the left arrow in the List panel of the Inspector. Each click will take you back a level. Note that clicking on the left arrow when you are currently in the base level of a list will turn your text back into normal text (ie, not a list).

Text with the base level list styling (which is the level that will be used for your main menu items in your CSS Menu) displays with a round black bullet. Clicking on the right arrow button in the List panel will display text in the next list level which is indented further from the left and has white circle bullets with a black outline. Clicking again on the right arrow in the List panel will display text indented further from the left and the text will have square black bullets in front of them.

In the screenshot below, you can see the hierarchy of the nested list for a photography web site. The list entries “Welcome”, “Services”, “Galleries” and “Contact” are base level list items, so they will display in the finished CSS Menu as main menu items.



In the screenshot, the entries for “Weddings” and “Portraits” are second level list entries and, because they appear immediately underneath “Galleries”, they will appear as a submenu of that main menu item.

The entries for “Adults”, “Children” and “Pets” are third level list entries which will appear as submenu items of “Portraits”, which in turn is a submenu of “Galleries”.

After entering the text for “Pets” (which is a third level list item) it is necessary to click the left arrow in the List panel of the Inspector twice to go back two list levels, so that “Contact” is a base level list item.

You can see how this will look in the finished CSS Menu in the first screenshot in this article (above).

Linking and styling a CSS Menu

Now that the hierarchy for the list is done, links need to be established for each menu entry to the appropriate page in the site. To do this, you need to create a page for each menu item you want to display as a link.

Once that’s done, you’ll notice that linked text now displays in blue with an underline—you can ignore this for now as the CSS Menu Action will take care of the color and underline behavior of text in the navigation bar.

To style a CSS Menu, it’s important that you only apply Font, Size, Style and Align attributes to the text in the Inspector - all other styling (link color, underlining, etc.) is controlled by options applied in the CSS Menus Action (Note: Pro-users can use Pro-specific styling or a CSS text style to apply additional styling to a CSS Menu item, but take care not to apply a color or underline attribute to the text as this will conflict with the CSS Menu Action).

Applying and setting options for a CSS Menu

The CSS Menus Action is applied to the item by selecting it, going to Item>Actions and choosing CSS Menus.
As soon as the Action is applied to the item, you’ll see a message displayed on the item itself stating that you need to publish your file to see a preview of the CSS Menu—this is because the HTML for the menu needs to be generated so a preview can be displayed.



With the item selected, open the Actions palette to see that there are two panels of settings which control how the menu will behave—Main Menu Settings and Submenu Settings—and these are chosen by clicking on the popup at the very top of the Actions palette. As you would expect, the Main Menu Settings refer to the settings of the menu items displayed when you first see the page in a browser, and the Submenu Settings refer to the submenus which appear when you move your mouse over menu items with associated submenus.

Main Menu Settings options

The default layout of the CSS Menus Actions palette is shown here. Click on the disclosure triangles for each section to view all the options. Sections with checkboxes need checking for options to become active.



  • Highlight Current Page: Setting this option will give the site visitor a visual reference of which page they are currently viewing. After turning this on, you will be able to set a value for the Current Page in the Links and Background sections.
  • Text Direction Right to Left: Set this if your menu is using right-to-left text.


Size and Shape section



  • Layout: This offers the choice of a vertical or horizontal layout for the main menu items. If you choose Horizontal, an option appears called Use Content Width which will make main menu widths relative to the width of the text within it.
  • Alignment: This controls the alignment of the CSS Menu within its container item.
  • Width: The width of each “cell” of the main menu can be given in Ems (a measurement relative to the size of HTML text) or in Pixels (a fixed width) by choosing the unit of measurement in the Units popup. Width values can be set to one decimal place for Ems, but a Pixel value must be a whole number. Note: Using Use Content Width (above) will render Width inactive.
  • Padding: This controls the amount of space around the text in each main menu “cell”. By adjusting these values you can position your text within the menu cell. Adding to the padding value for top and bottom will increase the height of a menu cell.


Links section


  • Link: This controls the color of link text within a CSS Menu cell in its normal state. Note that you will only see this take effect once links have been established.
  • Hover: This controls the color of the text within a CSS Menu cell when it is moused over.
  • Click: This controls the color of the text within a CSS Menu cell in its clicked state (ie, when the click button on a mouse is depressed).The three link states above each have an Underline option to the right of their color popups.
  • Current Page: This option will only appear in the Links section if the Highlight Current Page option is checked in the Main Menu Settings. This controls the color of the text for the main menu cell of the page currently displaying in the visitor’s browser.


Background section



The options in this section will be greyed out until the Background checkbox is checked. The colors here apply to the background color of the CSS Menu cell in the normal, mouseover and click states.

All the popups in here are exactly the same as those in the Links section—the main difference is that there is a different option to the right of the popups.



  • Use Image: This offers the choice to import a graphic to use as a background to a menu cell in each state. With the option checked, two new options appear underneath:
  • Image: Click on the popup and choose Select... to choose the graphic you want to use for your menu item background.
  • Repeat: The left popup controls whether the imported graphic “tiles” horizontally and vertically (xy), horizontally only (x), vertically only (y) or doesn’t tile at all (None). The right popup controls the position of where the graphic initially appears in the menu cell.
  • Current Page: If the option is checked in the Main Menu Settings this popup can be used to apply settings to the background of the Current Page menu cell.


Border section

The options in this section will be greyed out until the Border checkbox is checked. Here you can choose a border for the overall area of CSS Menu. Note that if you want to apply a dividing rule between individual menu cells, you need to use the options in the Item Divider section.



  • Custom Borders: By default, the border will be applied all around the CSS Menu—but you can check this option to display a popup for each border edge where you can apply a different border or choose to have a border only on specified edges.
  • Border: This popup allows you to choose a color for the border.
  • Style: In addition to a solid rule border, you can choose from a selection of different border styles, such as Dotted or Double.
  • Size: Here you can choose from a selection of preset pixel widths for your border.


Item Dividers section

This section offers options to display dividing rules between the individual cells of the menu.



  • Top/Bottom or Left/Right: Depending on whether you chose a Vertical or Horizontal layout for your CSS Menu in the Size and Shape Section, the popups here will show either Top and Bottom (for a Vertical menu) or Left and Right (for a Horizontal menu). Use these to choose a color for one edge or both (or choose None).
  • Style and Size: As with the Border section, you can choose from a selection of different dividing rule styles.


Arrows section



When a main menu has a submenu, or if a submenu has a further submenu, it can be useful to give the visitor a visual reference so they know that there are more choices available if they hover the mouse over the menu item (see an example on the screenshot at the start of this article). In this section you can choose to automatically apply a preset arrow graphic to the menu cell for this purpose—or you can import a custom graphic.
  • Style: Click on this popup to choose from a selection of preset colored triangles, or choose Custom Files... to activate the File popup below, where you can choose Select... to import a custom graphic.
  • File: This popup is greyed out and inactive unless Custom Files... is chosen in the Style popup.
  • Offset (px): This value controls the offset in pixels for the position of the arrow graphic from the right-hand edge of the menu cell (or left-hand edge of the cell if using right-to-left text).


Submenu Settings options

The options in the Submenu Settings panel are almost identical to the Main Menu Settings�. The main differences being that you have options for Submenu Direction and Use Main Menu Settings. The only other difference is that there are fewer options in the Size and Shape section—which is because many options are pre-determined by those used in the Main Menu Settings.
  • Submenu Direction: There is an option (mainly for those using Right to Left languages) to display any submenus to the left of a parent menu cell.
  • Use Main Menu Settings: Checking this will copy across the options chosen for your main menus. If you want to use different widths, colored menus, etc., for submenus, leave this unchecked (though this will mean entering all the options again in the Submenu Settings panel). Note that using Use Content Width in the Main Menu settings can cause issues with this option.


PREVIEWING YOUR CSS MENU

Once all the options are set for the CSS Menu, you can now publish the file to create a preview image which will give you some idea of how the menu will look when viewed in a browser.

If, as suggested earlier, you created the CSS Menu on a normal site page (rather than a Master page), you can simply go to File>Publish site to see a preview of how your menu will look.

If you created your CSS Menu on a Master page, you will see a message inside the menu item on the page stating “Live Preview not available on Master Page”. To see a preview of how the menu looks, click on a site page created from that Master. To make edits to your menu, remember to go back to the Master page again so the edits will take effect on all site pages created from that Master.

If you want to test your CSS Menu and all of its links, you will need to preview the file in a browser.


CSS MENU TROUBLESHOOTING TIPS

Softpress Support occasionally gets queries from new users who can’t get their CSS Menu to work as they want or who have particular issues. Let’s look at some of common queries and their solutions:

--------------------------------
Query: Why are some (or all) links in my CSS Menu appearing with underlining when the option isn’t checked in the CSS Menus Action?

Solution: This is almost always because there is some Color or Underline styling applied to the text in the CSS Menu. Double-click on the item to show the text, select all the text in the menu, go to Style>Remove Styling, reapply just Font and Size attributes (plus Align if you want anything other than the default Left align) in the Inspector’s General Settings tab.
If the above doesn’t fix the problem, check you don’t have any Links styling applied to the page. To check this, make sure nothing is selected on the page, go to the Links panel in the Paintbrush tab of the Inspector and make sure all states display as None and the Underline buttons display as white (if they don’t, click the buttons repeatedly to toggle them back to white).

Freeway Pro users may find they have a custom CSS text style applied to the text in the menu. This style may contain attributes which conflict with the options chosen in the CSS Menus Action itself. Removing the styling using the method above should solve this.
--------------------------------
Query: Why do the submenus of my CSS Menu appear behind other items on my page?

Solution: In Freeway Express the submenus of a CSS Menu will always appear above any other content on a page. However, if you are using “layer” items in Freeway Pro (perhaps by having your CSS Layout button switched on), it is possible that items on your page are above the CSS Menu item.

To fix this, select the CSS Menu item and make it a layer (if it isn’t already a layer item) by switching on the Layer option in the Inspector and then going to Item>Bring to Front.
--------------------------------
Query: Why can’t I get the widths of my submenus to display correctly in the CSS Menu?

Solution: The most likely reason for this to happen is if you have the Use Content Width option checked in the Main Menu Settings and you also have the Use Main Menu Settings option checked in the Submenu Settings.

You need to be aware that the Use Content Width option cannot be made to work for submenus. If you have the options switched on in the Main Menu Settings, you’ll need to uncheck the Use Main Menu Settings option in the Submenu Settings and manually apply the submenu options.

User Opinions

100% thumbs up 0% thumbs down (7 votes)

How would you rate this answer?



Thank you for rating this answer.

Continue