NAVIGATION STRATEGIES - HTML5 - page 146

Similarly in global navigation, you must consider navigation between the major links. For
example, suppose you have a big site with the global navigation broken down into three
categories:

Animal
Ve g e t a b l e
Mineral

h at's certainly global and links would i t nicely on every page like the following:

Animal | Vegetable | Mineral

However, within each of those general categories, you're going to need something more
specii c. For example, suppose a user wants to i nd a breed of dog — a Greater Swiss Moun-
tain Dog. h e following path would be a possible one depending on the designer:

Animal

Mammal

Dog

Breeds

Greater Swiss Mountain Dog

150

Each submenu will have lots of choices, so let's consider what elements are available in
HTML5 to handle these navigation paths from global navigation.

Using lists in global navigation
One way to approach global navigation is to use lists. For example, consider the following
script ( ListNavigation.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) that uses global navigation and local navigation.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/* 3C514C,98AB98,D3DFD3,A6A47D,8C1616 */
body {
color : #3C514C;
background - color : #D3DFD3;
font - family : Verdana , Geneva , sans - serif ;