HTML and CSS Reference
In-Depth Information
In Figure 8-5 note that the global navigation incorporates the color palette of the respective
categories. It would be foolish consistency to insist that the color schemes be the same.
However, the global navigation is consistent and each page is consistent with the other pages
in the same category.
VERTICAL AND HORIZONTAL NAVIGATION
Besides using the horizontal plane along the top and bottom of a page for navigation, inter-
face designers ot en reserve part of the side of a Web page for navigation. Figure 8-6 shows
the general design for this approach.
Global links
Content area
Topic links
Figure 8-6: Vertical and horizontal navigation.
160
When using horizontal and vertical link planes, the user can see all the global links and the
links for the current topic simultaneously. More of the viewing area is taken up by the
navigation system, but with the larger monitors becoming standard on computers, this isn't
that much of a problem. With electronic tablets like the iPad that have smaller screens, it cuts
into the usable viewing area, but not a great deal. However, on mobile phones, especially
when viewed vertically, the content space is severely reduced.
To create an area for a vertical link area with HTML5, you just need to set up a two-column
page below the area generally reserved for the logo and global navigation bar.
APPLYING CSS3 PSEUDO-CLASSES
When dealing with more complex navigation systems, you may want to consider CSS3
pseudo-classes. h ese are class dei nitions added to an element. For navigation, the following
four pseudo-classes are important because they're associated with the <a> tag:
link
visited
hover
active
 
Search WWH ::




Custom Search