Using lists in global navigation
One way to approach global navigation is to use lists.
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* 3C514C,98AB98,D3DFD3,A6A47D,8C1616 */
body {
color:#3C514C;
background-color:#D3DFD3;
font-family:Verdana, Geneva, sans-serif;
}
h3 {
color:#8C1616;
background-color:#A6A47D
}
a {
color:#8C1616;
font-size:11px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Global Navigation</title>
</head>
<body>
<nav> <a href=”#”>Animal</a> | <a href=”#”>Vegetable</a> | <a href=”#”>Mineral</a> |
<ul>
<h3> Animals</h3>
<li><a href=”#”>Mammals</a></li>
<li><a href=”#”>Fish</a></li>
<li><a href=”#”>Birds</a></li>
<ul>
<h3> Mammals</h3>
<li><a href=”#”>Dogs</a></li>
<li><a href=”#”>Cats</a></li>
<li><a href=”#”>Other</a></li>
<ul>
<h3> Dogs</h3>
<li><a href=”#”>Golden Retriever</a></li>
<li><a href=”#”>Red Setter</a></li>
<li><a href=”#”>German Shepherd</a></li>
<li><a href=”#”>Greater Swiss Mountain Dog</a></li>
</ul>
</ul>
</ul>
</nav>
</body>
</html>
Just from looking at the code, you may suspect that
this kind of navigation system will quickly overwhelm the page. Figure 1 shows what appears even though the possible choices have been
drastically cut
Figure 1: List navigation.
With a large enough screen and abbreviated choices
such as those used in the example, it may be possible to have a
navigation system using the <ul> tags. However,
with the list system of navigation on mobile devices, the best advice
is, “Don’t even think about it!” Figure 2 shows how the navigation
takes up the entire window in a mobile device.
Clearly, as you can see in Figure 2, some other
system of navigation is required so that the topic can be viewed.
Figure 2: List navigation crowds the display area on a mobile device.
Drop-down menus and global navigation
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. The select
element displays the first item in a list of options that can be seen
only when the user clicks on the select window that appears. The 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. The following snippet shows the basic format:
<select id=”animals” name=”global1”>
<option value=”horses”>Horses</option>
<option value=”dogs”>Dogs</option>
...
</select>
This 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.
<!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 3 shows, very little space is taken up.
The 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, you can style the font family with good results, but other styling is unpredictable between different browsers.
Figure 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.
<!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”>
<option value=”pets”>Pets</option>
<option value=”pests”>Pests</option>
<option value=”easter”>Easter</option>
</optgroup>
</select>
</nav>
<body>
</body>
</html>
For some reason, different browsers have different displays of the category headings generated by the optgroup element. Figure 4 shows how the same menu looks on different browsers.
Figure 4: Using the <optgroup> tag.
Of the four browsers tested, Firefox stands out as unique. The optgroup
headings are italicized and the color combinations are preserved when
the menu opens. The other browsers display the correct color scheme
only when the menu is closed. (Will this give designers another
challenge? Yes!)
