This week, we'll learn to use lists to create vertical and horizontal menus, or as the author of Stylin' calls them, interface components.

We will start by reviewing basic lists and then examining several list properties that can be used to create various menu designs. Once we've explored the useful list properties, we'll apply these properties to create vertical and horizontal menus.

We'll wrap up our discussion of interface components with navigation menu techniques. I'll present several simple techniques for optional layering of navigation component background colors, producing a non-wrapping horizontal menu, and floating a horizontal menu to the right. We'll finish up the topic of menus with some clever techniques for adding graphic embellishments to menus. You'll learn about a technique to create rollover images with a single image file, and a method that makes navigation tabs dynamically size themselves according to the text on the tab—techniques that are only possible with CSS!

Basic Lists

An unordered list with with no styling displays as:

All well and good—the list items are displayed sequentially in a vertical structure with minimal spacing between the list items. This seems reasonable for the typical display of material presented in a list format.

However, we might desire extra space between each list item. This might be reasonable if we are documenting a sequence of steps where each list item contains more than a single line. Additional spacing between each list item may make each item more readable.

In the example below, the list has a class of tall attached to it, which provides the additional vertical space as padding.

.tall li { padding-bottom: 8px; }

And our modified list looks like this:

As opposed to no space between the list items:

You be the judge. The beauty about CSS is that as a developer, you have control over how your content displays.

An end-user will judge the effectiveness of your site based on the functionality of the user interface, and the readability of the content—these are factors you always need to consider.

Summary

List items can be spaced inside our graphical menus using padding. This is often done for general readability.

I will use this technique later to make menu buttons larger or smaller.