Chapter 9 - Site Navigation

The free-flowing nature of information in a nonlinear hypertext environment can be confusing to navigate. Help your users find content easily rather than making them hunt through a maze of choices. Let your users know where they are at all times and where they can go within your web site. In this chapter, you learn to build user-focused navigation to accomplish these goals.

When you complete this chapter, you will be able to:

Navigation Examples

Figure 9-19: Default Unordered List

Figure 9-20: List Element with Default Indent and Bullets Removed

Figure 9-21: Inline Menu List

Figure 9-22: Enhanced Horizontal Navigation Bar

Figure 9-24: Horizontal Navigation Bar with Consistent Button Width

Figure 9-25: Building the Vertical Navigation Bar

Figure 9-26: Unordered List Styled as Vertical Navigation Bar

Figure 9-27: Indicating History with a Background Graphic

Figure 9-29: Indicating Location with Bold Text

Figure 9-30: Hovering the Pointer Changes Link Text Color and Background Color

Figure 9-31: Hovering the Pointer Changes the Backround Image

Figure 9-33: Underlining a Link with the :hover Pseudo-class

Activity Files

Download the Chapter 9 activity files.