Use CSS to turn a bulleted (or unordered) list into a navigation bar with rollover effects using CSS

This tutorial works with Adobe Dreamweaver CS3, CS4, & CS5

Here's a great trick for turning a bulleted list (or unordered list) into a navigation bar with a simple rollover effect using Cascading Style Sheets (CSS).

Using a bulleted list for navigation bars is a well-accepted convention for websites that meet current accessibility standards. A bulleted list is a logical choice for navigation elements; even if the style rules are removed, the links still stand out from the rest of the elements on the page and are clearly grouped together in a list.

In the old days, we created rollover effects with images, but today's text-based navigation links created with text and CSS formated with the <ul> and <li> tags, offer many advantages, including:

• Text links load faster than images
• Text links are easier to update
• Text links are more Search Engine friendly

Here are a few tips for formatting your lists of links with CSS:

1. Format your links with the unordered list tag <ul>

First, make sure each list item is separate by a paragraph <p> tag, not a break <br /> tag. Select the text you want to use in your list and click on the unordered list icon in the Properties inspector.

The unordered list feature in Dreamweaver only works properly if it’s applied to elements separated by paragraph tags. If you try to format text with the unordered list and the bullets don’t appear before every item, it’s probably because they weren’t separated by paragraph tags. To fix the list, just delete any space between list items and press the Return or Enter key before each item in the list.

2. Create a CSS rule for the <li> tag to format the list items

Choose Format >> CSS Styles >> New to create a new CSS rule.

Under Selector type, choose the Tag selector and then select the li tag from the drop-down list. You can also type li into the field.

Press OK to continue on to the CSS Rule Definition dialog to create a new style that will alter the appearance of each list item.

3. Remove the bullets by defining a style rule in the List category

After the CSS Rule definition dialog opens, choose the List category.

In the List Category options, you can change the style of the bullet by selecting any of the options in the List Style Type drop-down.

You can use this dialog to replace the standard round, black, bullet with your own image by clicking on the Browse button next to the List-style-image field and selecting any image on your computer.

You can also remove the bullet completely by choosing none. In most cases, when you're using an unordered list to create a navigation bar, you'll simply want to remove the bullet so that the list looks better in your page designs.

 

4. Remove the indenting by styling the UL tag

By default, unordered lists are indented. You can increase, decrease, or remove the amount of indenting by defining a style rule for the <ul> tag.

Note: If you view the HTML code for an unordered list, you'll see that the list is defined by the open <ul> and close <ul> tags, which surround the entire list. Within those tags, the <li> tag adds the bullets (unless you've removed the bullets, as I have, with a style rule).

The indenting is defined in the UL tag. To remove the indenting, create a new style for the <ul> tag (just as you did for the li tag in Step 2).

In the CSS Rule definition dialog, select the Box category and set the padding to zero. That will remove the indenting. Similarly, you can add indenting by increasing the amount of left padding in the Box category.

5. Remove the underline from the links in your unordered list

You can create a compound style by combining the <ul> tag with the link tag to create a style that only changes the apparance of links when they appear within an unordered list.

In this example, I created a style named ul a to remove the underline from any links that appear within unordered lists without affecting other links on the page.

To create a style that combines two tags, create a new style and choose the Compound selector. Then choose the Text category in the CSS Rule definition dialog. To remove the underline from all of your links, choose none from Text-decoration options.

 

6. Increase the space between list items

It’s easy to give you list of links a little breathing room. Again, you'll want to add this style rule to the <li> tag. If you created a style for the <li> tag in step 1, you can edit the style by double clicking on the style name, li, in the CSS Styles panel.

When the CSS Rule definition dialog, choose the Box category. In the Box Category settings, use the margin and padding options to add space around the list items. In the example shown here, I’ve added 10 pixels of space to the bottom of each list item using the Margin options.

 

7. Add background colors to links

You can add color to your links by defining CSS rules for the link states.

In the example shown in this tutorial, I've defined an active link style that combines a light blue background color with a width setting (in this example, 100 px) and a little padding to create a big blue button. (In this example, I added 5 pixels of padding to the top and bottom, and 10 pixels of padding on the left so that the text doesn't bump up against the side of the blue box.

Here’s the trick that makes it work. In order for your big, blue box to appear around your links, you need to add one more setting to this style rule. Open the Block category, and from the drop-down list next to Display, choose block. This converts the link tag to act as a block-level element, which enables your padding and background color to display as you see below.

In this case, I created a compound style with the name, ul a:link so that my links will only display with this blue box if they appear within an unordered list.

8. Define a style for the hover state to create rollover effects

Now let's add a rollover effect by creating a second link style for the hover link state, a:hover.

Again, here’s a trick: Start by duplicating the a:link style you created in step 6. To duplicate any style, right-click (or option-click on a Mac) on the style name and choose Duplicate.

As you duplicate the link style, rename the new style to ul a:hover. This compound style will only affect links in the ul tag when the user rolls a cursor (or hovers) over a link.

The duplication trick is useful because you want to make sure that all of the styles you create for a set of links are exactly the same (same padding, width, etc.). Of course, to create the rollover effect, we'll change one element of the style -- for the background color. You can make your links any color you want, but it's most effective if the hover color provides a clear contrast with the main active link style you created in Step 6.

 

9. Create more complex rollover effects

You can create more complex rollover effects by changing more than jus the background color, as I did in step 7. In this example, when a user rolls cursor over a link, the only interactive effect a visitor will see is the background color changing from light blue to yellow (in the figure below, you see that I've selected a yellow color for the background).

In many cases, a color change is all you need, but if you want to create more complex rollover effects, you can use background images, change the font color, font face, and other formatting options.

 

10. To view your rollover effects and test your links, preview the page in a web browser

When you're ready to test your link styles, you’ll need to preview the page in a web browser.

As you see below, when a user rolls a cursor rolls over the light blue links, they turn yellow. If I'd change the font face, or font color in the a:hover style, those changes would also be visible when the page was viewed in a browser.

Note: In Dreamweaver CS5 and CS6, you can also choose the Live View button from the top of the workspace to see rollover effects

 

11. Add dividing lines to separate and define links

To add a line between each list item, double click to edit the li tag style you created earlier, and add a border.

In CSS, you can add borders to any or all of the sides of an element. Thus, if you define a border only at the bottom of the <li> list items, you can add a dividing line, like the one shown below.

Similarly, you can use borders on the left and right to create dividing lines between list elements that appear in a row.

 

12. How do you change an unordered list from a vertical list to a horizontal row of links?

In many designs, you'll want your links to appear in a row, not a list, but you can still use the unordered list.

to making an unordered list display horizontally across a page, create or edit a style for the list item <li> tag. Select the Block category and form the Display drop-down menu, choose inline.

Note: If you have set Display to block in the style for the link tag, you will need to remove the block setting for the links to appear horizontally. If you change the Display to inline, you can add space between links, by increasing the amount of padding in the Box category.

Learn more about CSS with these tutorials:

• Add Background Images with CSS
  
• Align Images with CSS floats

 

Contact | Terms & Conditions of Use | Privacy Policy | Site Map

Copyright 2001 to 2012. All rights reserved. DigitalFamily.com is owned and operated by Artesian Media, Inc.