1 Styling a Vertical Nav Menu

This began as a project to help another Freeway 4 Pro user get the hang of styling a list of links as a vertical navigation menu. Walter Davis had covered the fine points in a recent posting at Freewaytalk, but for ‘first-timers’ it can be hard to get the hang of putting it together. There is really no one right way to do this, but the method outlined here works pretty well… The finished working menu can be seen here on the left of this page.

Make Your List

The first thing to do is to actually define a list. The way I do that in Freeway 4 Pro is to create a class style which I use to make the list container, in this case an unordered or ‘bulleted’ list ( figure A ). Then type your list separating each item with a hard return. Because this is a paragraph-level style, you don't have to select all the text in the run, just drag your cursor so so the selection includes at least part of each line to be in the list, and click the style name in the Styles palette to apply.

In HTML terms, lists consist of two structural elements – the individual list items, and the list container which tells the browser that all these items belong together in the same list. List items are always enclosed with the <li> tag. Unordered lists are always enclosed with the <ul> tag. ( figure B )

When our style is applied, Freeway automatically converts those hard returns (or ‘linefeeds’) into list item <li> tags, and then wraps the whole thing with <ul> tags to identify the list container. The name you choose for the style is also coded into the list container tags as a class style, <ul class="mylistsyle">, which is helpful because that gives us an easy “hook” to hang our CSS styles on. Alternatively, we could also target our styles to the id name of the div/box our list is in… like I said, there’s no one right way to do this. For now, I think I’ll just cover the class style method.

Styling the List Container ( .navlist )

Oddly, this is the only style that we will ‘apply’ in the traditional Freeway sense. The other styles we will make will apply to items that are generated by Freeway as it publishes or previews the page. For the time being, this is how our list will appear as styled in Freeway's working environment ( figure C ).

Figure A showed us which attributes we used to create the style, now let’s mention why we chose them. We easily set font-family and font-size attributes in our list container style, but it is important to remember this style actually refers to the list container, and not the list items themselves. While the list items will inherit the font and size attributes from this style, others like line-height (leading) and margin-top and -bottom (space before and after) will not pass on and will apply instead to the container only. A little later I will show you how to separately style the list items.

We set the margin-left (left indent) and the padding-left attribute (set through the Extended interface) to zero to remove the normal list indent appearance in most browsers.

We don’t really want bullets in this list, but that’s not the same as choosing the ‘Unbulleted’ option from Freeway’s List attribute values. Some of the different list options produce lists that are structurally different from each other, and not just visually different. These differences can be important when visual cues are no longer relevant, as when CSS breaks down. The structural tags remain to give relevance to our navigation menu. ( Example )

Setting the Freeway value to ‘Round Bullets’ will give us our unordered list, then using the Extended attributes to set the list-style attribute to ‘none’ removes the bullets, but leaves our structure as intended.

The width: 180px setting is not really necessary as the list container will automatically expand to fit the width of the div/box that it is defined in. The easiest way to deal with this is to set the width of the div/box the list is in. The reason the width is important is because our link buttons will expand to be as wide as the list container itself.

Styling the List Items ( .navlist li )

The bullet-proof way to style the individual list items is to target the list item <li> tag. If you name your style li (in the Tag field) then whatever attributes you define will apply to all list items in your site. ( figure D )

But that may be overkill. So to narrow it down to just the list items in our navigation menu, let’s incorporate the class style that we gave to the list container. ( Example ) The style .navlist li is a shorthand way of saying “list items whose container have the class style .navlist”. This allows us to give a different style to other lists in our site. We can also be more specific by using the style name ul navlist li which is another way of saying “list items which belong to unordered list containers which have the .navlist class style”.

Repeating the margin-left and padding-left attributes that we set for the list container style is a fix for some browsers which incorrectly indent the list items instead of the whole list container.

Styling the List Hyperlinks
( .navlist a, .navlist a:hover )

We will also use our list container style to target the hyperlink tags in our navigation list, placing most of the style load on them. ( figure E, figure F ) But first lets talk about hyperlinks.

Browsers identify hyperlinks by the <a> or ‘anchor’ tag, using four pseudo classes to modify the way the hyperlinks appears in the browser. They are a:link, a:visited, a:hover, and a:active. Because of the way Freeway organizes the stylesheet, creating custom link styles can be difficult, and the possible workarounds could be a whole other topic. For today, the solution I currently favor is to leave the :link pseudo class off of the style name, shortening .navlist a:link to just .navlink a. This places the weight of the style on the entire anchor family within our navigation list, except for the :hover state which is covered by .navlist a:hover. Unfortunately, this solution drops the use of the visited and active states, but for most situations that doesn’t really bother me. The result of this trade-off is a very reliable link style.

So with just two link styles to worry about, we set up .navlist a and define the color of our link font, and the background-color as well. To accent the background-color, we add a little padding to the link text through the Extended style attribute. This padding, along with the extended attribute display:block is what gives our link the appearance of being in a box.

There are different ways to use borders to enhance this rectangular ‘button’ effect, but the original example I was working from used a thin white dotted border along the bottom of the link. And this style is also where we set our text-decoration to none, to eliminate the browser‘s standard link underline.

When it comes to the hover style, .navlist a:hover, you may also notice that we do not repeat unchanged values like the padding, border, display, or text-decoration. That’s because they are inherited from the .navlist a style. This means we only need to define those attributes in the hover style that are different from the link style, in this case the link text color and the background-color.

A Bonus Style

In one of the discussion threads at Freewaytalk, Walter had suggested something I had not given much thought to – a style to represent the link to the current page, a visual way to identify where the user was in the navigation structure. It sounded cool, and I wondered just how would I do that.

The easiest hook to hang a style on ( I think ) is still the class style. So when I set the link for the current page, I used Freeway’s Hyperlink command ( menu>Hyperlink, or command-k ) to set the link to the current page, then opened the Extended interface from the Hyperlink window. ( figure G ) Then I created a new attribute and called it ‘class’, then gave that a value of ‘here’, so when Freeway writes the code for that link, it will have that class style name.

Next, in the Edit Styles window I make a new style and type .navlist a.here into the Tag field. ( figure H ) This is like telling the browser to “apply this style to anchor tags (hyperlinks) that have the class style .here and are themselves enclosed in a container styled with the .navlist class style.” Again, all those unchanged attributes from the .navlist a style don’t even need to be repeated, just setting the color attributes ( and in this case, the font-weight ) are enough to achieve the effect.

For educational purposes only, I am including the Freeway 4 Pro source file for this article. You can download it here, or from the link at the top of the page.

Ernie Simpson is known to his good friends as The Big Erns, and is a Freeway 4 Pro User. You can contact him here.

CSS Styles Used Here…

.navlist a {: color: #cf9;; background-color: #333;; padding: 3px 0 3px 20px;; border-bottom: 1px dotted white;; display: block;; text-decoration: none }
.navlist a.here {: color: #cf9;; font-weight: bold;; background-color: #999 }
.navlist a:hover {: color: #fff;; background-color: #999 }
.navlist li {: margin-left: 0px;; padding-left: 0 }
.navlist {: font-family: Trebuchet;; font-size: 12px;; margin-left: 0px;; padding-left: 0;; list-style: none;; width: 180px }

This page was made with Freeway 4 Pro. Download the Source Files for this Page. (882.61 K)

1

Styling a Vertical Nav Menu