Prompted by some recent discussion on the Freewaytalk boards, here is an outline of a simple way to create and style a list menu using CSS in Freeway 4 Pro. The example page and file download are available here.
First, draw a layered box the width you want your menu to be, then type in each location for the menu on its own line.
I like my menus to be made from lists because I think lists maintain a meaningful structure in the absence of styling. For me, this means the content is preserved in worst case scenarios. So, to make the list structure, create a New Style from the cog in the Styles Palette and name it menulist.
In the Paragraph attributes set the List style to Round Bullets. We don't really want bullets, but we do want Freeway to to set this style as an unordered list. To get rid of the bullets, we will over-ride it with an Extended attribute, so click the Extended button and create the attribute list-style-type with a value of none. While we're there, let's add two more extended attributes, margin-left and padding-left, both with values of zero.
Before we're finished with this style, let's set our basic type style for our menu. Font, size, and color are all allowable for this style. Now go back to the page and apply the style to the menu text. Freeway still shows bullets in the work view, but won't appear in preview or your browser.
Next, create your hyperlinks for each item in the list. The default link style is ugly blue with underlines — to change it we will need to target just the items in our list with Tag styles to cover the Link and Hover states.
Browsers use the names of styles to target or select the items they apply to. Our earlier style for the menu is a "class" style because it uses a user-selectable name to define a class of objects or spans of text that we then single out to be affected. Styles can also select their targets by their structural tags, alleviating the need for us to identify the object or texts they apply to. Ordinary paragraph <p> and header <h1> styles are examples of what I call "tag" styles.
Create a new style from the Styles Inspector cog. To make it a Tag style for the Link state of our menu items, we would put the name for it in the Tag field of the New Style window, so put ul.menulist li a into the Tag field – spaces and all. This is the same as saying "this style affects hyperlinks in list items that belong only to unordered lists with the class style 'menulist'".
Set the Character Color attribute to White… this of course changes the link's ugly blue color back to the white we originally set for our menu's list items. To get rid of the underline we need to click the Extended button and create the attribute text-decoration with a value of none.
Now create another new style, this time for the Hover state of our menu links. In the Tag field, name it ul.menulist li a:hover — which still targets only the list item links in our specific menu list — but now only when the mouse pointer is hovering over them. In other words, a rollover.
This time we're interested in setting the Character Background Color attribute so that when the mouse pointer is over our menu link, the background color behind the type changes to highlight the link. Unless we want the type Color to also change, we don't need to re-apply it because it is an inherited attribute. The same goes for the text-decoration attribute.
Now preview the page. You'll notice that our menu looks pretty normal except for two things: the type is flush against the left side of the window, and when we put the mouse cursor over any of our menu links the background color is just barely visible. Let's fix that.
Choose Edit Styles from the Style Inspector cog and select our menu link state style ul.menulist li a. To make the background extend across the width of box we drew, click the Extended button and create the attribute display with a value of block. To get the background to extend slightly above and below our link, we will "pad" the area around the link a bit.
To do this, create another extended attribute for this style and name it padding. The shortcut way to define padding is to do it all at once, describing values for the top, right, bottom, and left sides in clockwork fashion. So a value of 3px 0 4px 20px will expand the space above our menu links 3px and below them by 4px. The display:block attribute takes care of our horizontal space so those measurements can be set to zero, except for the left setting which has the effect of moving our link type over 20px while keeping our rollover effect. You can alternately move the type over by moving the left edge of the menu box over, but remember the background-color would also move over.
There you have it, a simple but stylish menu using only CSS.
06.07.2007. 13:06
The Big Erns on 01.08.2007. 04:52
Hi Jeff... the Force Republish issue IS rather frustrating, isn't it? In fairness, Freeway is just trying to republish only what it sees as changed -- just that it does better at seeing things that change ON the page, not CSS style changes that are technically separate from the page. Browsers are also sometimes the culprit - using the old stylesheet in the cache instead of the updated CSS file. Glad you were able to get things working -- send me a link sometime.
Jeff on 31.07.2007. 18:47
Thanks Ern. Following these instructions is the first time I've got a CSS menu working in Freeway. But I was hampered by what seems to be a Freeway bug, which probably didn't help with my previous attempts at this. Everything was fine until I went back to the ul.menulist li a style to add the block and padding attributes. No matter what I did, they appeared in the Extended box, but they weren't affecting the Preview. I checked the code. Freeway hadn't added these attributes into the style definition. I deleted the style and started again with it from scratch, entering all the attributes at the same time. I Force Republished the page. And, at last, it worked.