Creating navigation menus with the CSS Menus Action

Documentation Freeway
1

Freeway 5 provides a new method for creating navigation menus. The new menus are CSS driven (making them fast) and they are built upon HTML lists, so they are accessible to people who are using assistive technologies such as screen readers.

Previous versions of Freeway provided JavaScript driven menus, which were slower and less accessible. In addition, JavaScript menus do not work if JavaScript has been turned off in your visitors’ browsers.

Freeway 5.4 includes an update to this Action (version 2), which includes a number of commonly requested features and enhancements. These features and enhancements are:

  • Fixed pixel widths: each menu item can now be set to a specific pixel width
  • Use content width: items in horizontal menus can now be the width of their contents
  • Adjustable height: the height of your menu items can be increased by changing the level of padding used in the menus
  • Alignment of the menus: the menus can now be positioned left, center or right inside their containers
  • Improved highlighting of the menus: when users hover over a submenu, the full path to the submenu will be visible
  • Border control: each side of the menu’s borders can now be customized
  • Item dividers: two separate colors can be specified for the menu item dividers
  • Arrows: the arrows or pointers for submenus can now be moved
  • Right to left: improved support for right to left text
  • Clicks: the appearance of menu items when clicked can now be specified
  • Graphic positioning: greater control of background graphics is now available

To create a CSS menu

  1. Draw an HTML item on your page
  2. Create a list containing the names of the pages in your site, and link them to those pages
  3. Open the Actions palette, by selecting it from the Window menu or from the toolbar
  4. Click on the plus button in the Actions palette and choose the CSS Menus Action from the list of Actions displayed
  5. Use the Actions palette to change the appearance and behavior of the menu. The options avalailable are:
    • Main or Submenu Settings: swap the options displayed in the Actions palette between the topmost level or any level below
    • Global settings:
      • Highlight Current Page: change the appearance of the active page (if a menu item contains a link to the page being viewed it will be used as the current page)
      • Right to Left: specify the text direction of the menus. This reverses the order of horizontal menus
      • Submenu Direction: when viewing the submenu settings, the direction of the submenus can be specified (left or right)
    • Size and Shape:
      • Layout: choose between Vertical and Horizontal menus
      • Alignment: can be set to Left, Center, or Right
      • Use Content Width (Horizontal menus only): will cause all menu items to use the width of their content
      • Width: dictates the width of each menu item (Ems or pixels)
      • Padding: is used to set the top, right, bottom and left padding of each item
    • Links:
      • Normal: choose a color for all text in the menus
      • Hover: choose a color for all hovered text in the menus
      • Click: choose a color for all clicked text in the menus
      • Current Page: choose a color for the text of the active (currently being viewed) page in the menus
      • Underline: applies an underline to the menu item
    • Background:
      • Normal: choose a background color for all menu items
      • Hover: choose a background color for all hovered menu items
      • Click: choose a background color for all clicked menu items
      • Current Page: choose a background color for menu items of the active (currently being viewed) page
      • Use Image: available for all the above options, when clicked will activate options for selecting and positioning images
        • Image: choose the image you want to be displayed
        • Repeat: specify how you want the image to repeat (x is horizontally and y is vertically)
        • Position: the position of the image
    • Borders:
      • Color: choose a border color
      • Size: choose the size of the border
      • Style: choose the style of the border
      • Custom Borders: allows the above to be set for all four sides of the border
    • Item Dividers:
      • Top/Left: choose the color of the top or left divider (based on the layout)
      • Bottom/Right: choose the color of the bottom or right divider (based on the layout)
      • Style: choose the style of the dividers
      • Size: choose the size of the dividers
    • Arrows:
      • Style: choose from a predefined set of arrow graphics
      • File: if Custom Files is chosen in Style a custom graphic can be chosen for your arrow/pointer
      • Offset: specify how far from the left or right edge the arrow should be
  6. Once you have published your site, Freeway will display a preview image of the menu. You can still edit the list from which the menu is generated by using Freeway’s normal text selection method (click twice on the item which contains the list)
Typically, you will want to create a navigation menu on a master page, so that it is displayed on all the pages which derive from this master.

For a step by step visual tutorial of the CSS Menus (version 1) take a look at this video tutorial.