An alternative approach to global navigation using text links is to use elements that can provide more information in a smaller place. One such element is the <select> tag. Th e
select element displays the fi rst item in a list of options that can be seen only when the user clicks on the select window that appears. Th e format is made up of a <select> tag along with an <option> tag nested within the select container. Each option container contains an object that is visible when the drop-down menu opens. Th e following snippet shows the basic format:
<select id=”animals” name=”global1”>
<option value=”horses”>Horses</option>
<option value=”dogs”>Dogs</option>
... </select>
154
Th 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 </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 </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 </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>
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.
Th 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,
155 you can style the font family with good results, but other styling is unpredictable between
diff erent browsers.
Figure 8-3: Displaying menu choices with the <select> tag.
If the categories appear a bit shallow, you can add greater detail in an outline format using the
<optgroup> tag. With each tag, a new subgroup is added. You can nest them in several levels if you wish. Th e following listing (Optgroup.html in this chapter’s folder at www. wiley.com/go/smashinghtml5) shows how the optgroup element is used in conjunc- tion with the <select> and <option> tags.
<!DOCTYPE HTML> <html>
<head>
<style type=”text/css”>
select {
background-color:#F2EFBD;
color:#657BA6;
font-family: Verdana, Geneva, sans-serif; }
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Stratified Drop-Down Menu</title>
</head> <nav>
<label for=”animals”>Animals</label>
<select id=”animals” name=”global1”>
<optgroup label=”Dogs”>
<option value=”hounds”>Hounds</option>
<option value=”work”>Work</option>
<option value=”terrier”>Terriers</option>
</optgroup>
<optgroup label=”Horses”>
<option value=”race”>Race</option>
<option value=”work”>Work</option>
<option value=”show”>Show</option>
</optgroup>
<optgroup label=”Rabbits”>
156
<option value=”pests”>Pests</option>
<option value=”easter”>Easter</option>
</optgroup> </select> </nav> <body> </body> </html>
For some reason, diff erent browsers have diff erent displays of the category headings generated by the optgroup element. Figure 8-4 shows how the same menu looks on diff erent browsers.
Safari Firefox Chrome Opera Internet Explorer 9
Figure 8-4: Using the <optgroup> tag.
Of the four browsers tested, Firefox stands out as unique. Th e optgroup headings are italicized and the color combinations are preserved when the menu opens. Th e other browsers display the correct color scheme only when the menu is closed. (Will this give designers another challenge? Yes!)