Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Scalable Navigation

2. Scalable Navigation

Provide site navigation that scales to any text size or content amount

The navigation of a website can often be the anchor for its design. It’s a page component that is as central and important as any. Traditionally, a web designer might crack open a favorite image editor and lovingly craft some buttons, tabs, or text to be stuffed inside a few nested <table> elements. Additionally, JavaScript might be used to trigger rollover effects that swap a second set of images. In the end, the result might look great—but what lurks beneath the surface may not be so desirable, as we’ll see by investigating a common approach to building website navigation.

Let’s take a close look at an example based on the traditional approach to designing stylish, image-based tabs. After we analyze the shortcomings of this particular method, we then wipe the slate clean and construct a similar—but bulletproof—design using lean, valid markup; three tiny images; and CSS.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint