• Jan 07, 2012

• Dreamweaver CS5: Building a Navigation Menu from a List

• by Iain Anderson in Dreamweaver

• Genre: Web
• Level: Intermediate
• Time to Complete: 5-15 minutes
• 0 comments — Start Discussion

When building a best-practice website, you should build your navigation menus using lists if possible. They’re semantically accurate (a menu is a list, after all) and CSS makes them easy to style. Let’s take a look at how a navigation list works under the hood. I’ll be using Dreamweaver in Code View, but feel free to follow along with a straight text editor if you wish.

Step 1 - Build a list

This part is easy: Create a new HTML file, no template, and simply type the items in your menu. Enclose each list item with <li> and </li>, and the entire list with <ul> and </ul>.

You should end up with something like this: 

However, you want to make sure each item links to something — it will become important as we build the CSS. So, add links to the “#” character, to create something like this:

Step 2 - Link to an external CSS file

In the CSS panel, press the New CSS Rule button at the bottom of the panel (the document with the plus symbol). Create an ID style with the name “navlist” and choose to create a New Style Sheet File. In the dialog that appears, name the file “style.css”. It’s always best to use an external style sheet, even when experimenting.

We don’t need to define anything using the dialog that appears next, so just press OK. You’ll have created a style sheet with a basic, blank style definition. View it by clicking on “style.css” just above your document, next to the highlighted words “Source Code”.

Step 3 - Add some basic CSS rules

We need to specify that the list has the ID “navlist” so that we can target it. In the HTML, add id=”navlist” to the <ul> tag.

Now we can get going on the CSS. You’ll probably want to adjust background-color, width, borders and margins to get started, and you’ll want to think about how you build the CSS selectors. If you use #navlist li, you’ll access the list item in the navigation list. Even better, target #navlist li a to target the links within your list. Adding padding to them makes a bigger target, while adding padding to a list item would not. Try:

}

• The  #navlist rule removes the bullets, margins and padding, and sets width. 

• The #navlist li rule adds a little space between the list items

• Finally, the  #navlist li a  rule sets colors, padding, removes the underlines, and (importantly) makes each list item appear as a block. Removing underlines should only be done if it’s obvious that the item is a link—use with caution.

Step 4 - Add some hover CSS rules

To make the list more reactive, add a hover rule:

Step 5 - Marking the active page

It’s common in these kinds of pages to mark the active page with a movable class style, for example class=”active”, which is placed on the current page. However, this means that the menu block is different on each page. It’s more convenient to tag each link in the HTML with a different class, then add a page-specific class to the the body tag, and catch them all with a single CSS rule. Something like this:

The matching CSS:

This way, you only need to change the class on the body tag on each page. Sneaky, but it works.

There are many, many more tricks, but that’s all for now. As you may have seen in the Exploring CSS video tutorial, to make the list horizontal, all you need is display: inline applied to the li element, so explore that if you wish. Next time, we’ll look at some more exotic options.

finished-product.png