HTML and CSS Reference
In-Depth Information
from the menu whose
href
attribute matches the ilename stored in
this_page
and adds a
class
attribute to it with the value
thispage
. hat new CSS class
can be used to style the
anchor
element diferently from the other links as
required—to swap foreground and background colors, for example:
#nav a { color: blue; background-color: white; }
#nav a.thispage { color: white; background-color: blue; }
Website navigation can consist of several elements. Most websites have some
form of navigation menu—either a menu bar incorporated into the page's
header or a list of links in a sidebar. Menu bars should always provide a link
back to the website's home page. It is standard practice to link the website's
title or logo image in a page's header area to the home page as well. A website
with long pages should duplicate the main navigational menu in the footer
areas of pages. Websites with many levels of organized content should provide
navigation “breadcrumbs,” a horizontal list of links providing a path from the
current page back to the website's home page.
eBay, the popular auction site, provides a good example of the use of bread-
crumbs and other navigational aids. Figure 5.1 shows the top-let portion of
an eBay page, which, along with the breadcrumbs, has menu bars and search
boxes. eBay's website is, of course, a complicated afair powered by a huge
database. Still, eBay has reined its site navigation over the years, and it exem-
pliies good practices.
Figure 5.1: navigation items on an eBay page
