Any global navigation system needs a way to call diff 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. Th 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>
157 Th e names of the form and select elements are important because JavaScript uses the
names as a path to the selected option. (If you’re familiar with arrays, the options are all treated as array elements.)
Th e JavaScript is placed in a separate fi le because if you’re going to be using it with a global navigation system, you don’t want to have to rewrite it with every page. Th e following JavaScript should be saved in a text fi le named globMenu.js.
function optionMenu()
{
var choice = document.menuNow.global1.selectedIndex;
var urlNow = document.menuNow.global1.options[choice].value;
window.location.href = urlNow;
}
What that refl ects is the HTML5 Document Object Model (DOM). Th e document is the Web page, menuNow is the name of the form element, global1 is the name of the select
element, and selectedIndex is the selected option. Because the selectedIndex is a number between 0 and the number of options in the <select> tag container, it can be used to choose the array element (option), which is selected. Whatever value is stored in the option is passed to the variable named urlNow. For example, the following line has a relative URL of
animals/dogs.html:
<option value=”animals/dogs.html”>Dogs</option>
Th e fi nal line in the JavaScript, window.location.href = urlNow, has the same function as the following HTML5 line:
<a href=”animals/dogs.html”>
In this context, a diff erent JavaScript function would have to be written for each <select>
tag because the function uses a specifi c reference to that tag (global1). More sophisticated JavaScript could be developed to use variables for the diff erent element names, but the function employed here is relatively short and easier to implement.
To test this out yourself, create simple Web pages with the following names: horses.html
dogs.html
cats.html
rabbits.html
raccoons.html
Th e Web pages can just have names on them — nothing fancy. Th en, in the same directory, enter the following HTML5 code (SelectNavJS.html in this chapter’s folder at www. wiley.com/go/smashinghtml5).
158
<!DOCTYPE HTML> <html>
<head>
<script type=”text/javascript” src=”globMenu.js” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Drop-Down Menu</title>
</head> <body> <article>
<header>
<nav>
<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>
<option value=”animals/cats.html”>Cats</option>
<option value=”animals/rabbits.html”>Rabbits</option>
<option value=”animals/raccoons.html”>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> </form> </nav> </header> </article> </body> </html>
Test the page using with Google Chrome or Opera — at the time of this writing, those were the only two browsers that had implemented this aspect of HTML5.
For the time being, you won’t be doing anything with the second two drop-down menus, but at the end of the chapter you’ll be given an opportunity to complete them with a few additions to the JavaScript fi le.
159