How to Skin a Menu
Project 5
Project files
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
headof pages that are part of the CSS section of the site, you'd include alinkelement like this:"