NAVIGATION STRATEGIES - HTML5 - page 150

h is can be a handy way to place all of a site's links into a small area for use as a global menu.
You can nest as many <option> tags inside the <select> container as you want. In order
to see how this can be set up as a global navigation system, the following HTML5 script
( SelectNav.html in this chapter's folder at www.wiley.com/go/smashinghtml5 )
illustrates a simple example.

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Drop - Down Menu </ title >
</ head >
< nav >
< label for = ”animals” > Animals&nbsp ;</ label >
< select id = ”animals” name = ”global1” >
< option value = ”horses” > Horses </ option >
< option value = ”dogs” > Dogs </ option >
< option value = ”cats” > Cats </ option >
< option value = ”rabbits” > Rabbits </ option >
< option value = ”raccons” > Raccoons </ option >
</ select >
< label for = ”vegetables” > Vegetables & nbsp ;</ label >
< select id = ”vegetables” name = ”global2” >
< option value = ”carrots” > Carrots </ option >
< option value = ”squash” > Squash </ option >
< option value = ”peas” > Peas </ option >
< option value = ”rice” > Rice </ option >
< option value = ”potatoes” > Potatoes </ option >
</ select >
< label for = ”minerals” > Minerals & nbsp ;</ label >
< select id = ”minerals” name = ”global3” >
< option value = ”tin” > Tin </ option >
< option value = ”gold” > Gold </ option >
< option value = ”copper” > Copper </ option >
< option value = ”iron” > Iron </ option >
< option value = ”mercury” > Mercury </ option >
</ select >
</ nav >
< body >
</ body >
</ html >

154

With that many HTML5 tags, you might expect a much larger Web page. However, as Figure
8-3 shows, very little space is taken up.

h e HTML5 code has no CSS3 to format the text, and as you can see, the default body font is
a serif font and the default menu font is sans-serif. When you use CSS3 for styling, work with
the <select> tag for style instead of the <option> tag. If you style the option element,