Eric Meyer

on CSS

cover image
Available now!

How to Skin a Menu

Project 5

preview image 1 preview image 2 preview image 3
Project files
Project 5 ZIP file Project 5 StuffIt file

Almost every web site that offers up more than a few pages sports a menu of navigation links. Sometimes they're across the top of the page, but the most popular setup is to put this navigational menu along the left side of the page. This helps make the links visible as soon as a page loads, yet it doesn't push the main page content downward. It also seems that users are much more comfortable with a one-link-per-line layout for navigational menus instead of having all the links in a single line across the top of the page.

Because a left-side menu is usually nothing more complicated than a series of hyperlinks, it's rich with styling possibilities. Just by manipulating the type of element that a hyperlink is, we can do some fascinating things to menu links.

In this project, we'll use some of the concepts explored in Project 4, "Bringing Hyperlinks to Life," as well as new ways to style hyperlinks. The project actually takes the same set of links and styles them in two very different ways, thus showing how significant changes in appearance are possible without changing the HTML source at all. The project also demonstrates some novel link-styling possibilities that use link states and box properties to succeed.

Errata

Page 98

The declaration margin: 0.66em; should not appear in this code block, since it is not mentioned in the text until just before Figure 5.2 on the next page.

Page 106

In the sidebar note "The Border Remains the Same," the text contains an inappropriate underscore character. The first example selector should read td#sidelinks a#comment.

Page 115

The sentence after the first block of code in the aside should read, "In the head of pages that are part of the CSS section of the site, you'd include a link element like this:"