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 >
 
Search WWH ::




Custom Search