Softpress KnowledgeBase. CSS Menus Action for Freeway 6 and earlier

Transcription

1 Softpress KnowledgeBase CSS Menus Action for Freeway 6 and earlier 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 1/5

2 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 MenuNow 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 MenuThe 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 optionsthe 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 2/5

3 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. 3/5

4 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. 4/5

5 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. // 5/5