HTML and CSS Reference
In-Depth Information
<
option value
=
”pests”
>
Pests
</
option
>
<
option value
=
”easter”
>
Easter
</
option
>
</
optgroup
>
</
select
>
</
nav
>
<
body
>
</
body
>
</
html
>
For some reason, dif erent browsers have dif erent displays of the category headings generated
by the
optgroup
element. Figure 8-4 shows how the same menu looks on dif erent browsers.
Safari
Firefox
Chrome
Opera
Internet Explorer 9
156
Figure 8-4: Using the
<optgroup>
tag.
Of the four browsers tested, Firefox stands out as unique. h e
optgroup
headings are
italicized and the color combinations are preserved when the menu opens. h e other browsers
display the correct color scheme only when the menu is closed. (Will this give designers
another challenge? Yes!)
USING JAVASCRIPT TO CALL A LINKED PAGE
Any global navigation system needs a way to call dif erent Web pages and the drop-down
menus need a way to call a selected item. Up to this point, the
<a>
tag has done a good job
of taking care of links, but you probably noticed the drop-down menus have no links. h e
<select>
tag needs to work with the
form
element (which is covered in detail in Chapter 14)
and a JavaScript function. (Chapter 12 has more details on getting started with and using
JavaScript.) On the HTML5 side, the following snippet shows the essentials:
<
form name
=
”menuNow”
>
<
label for
=
”animals”
>
Animals
</
label
>
<
select id
=
”animals”
name
=
”global1”
onChange
=
”optionMenu()”
>
<
option value
=
”animals/horses.html”
>
Horses
</
option
>
<
option value
=
”animals/dogs.html”
>
Dogs
</
option
>