HTML and CSS Reference
In-Depth Information
153
Figure 8-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. h e
select
element displays the i rst item in a list of options that can be seen only when the user
clicks on the select window that appears. h 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. h e following snippet
shows the basic format:
<
select id
=
”animals”
name
=
”global1”
>
<
option value
=
”horses”
>
Horses
</
option
>
<
option value
=
”dogs”
>
Dogs
</
option
>
...
</
select
>