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:
- Create usable navigation
- Design navigation for mobile devices
- Use graphics for navigation and linking
- Build text-based navigation
- Use lists for navigation
- Build horizontal navigation bars
- Build vertical navigation bars
- Use background color and graphics to enhance navigation
- Create hover rollovers
Navigation Examples
Figure 9-19: Default Unordered List
Figure 9-20: List Element with Default Indent and Bullets Removed
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.