HTML and CSS Reference
In-Depth Information
enabled in response to other page events, as shown by the third button in
Figure 5.3.
One last thing about buttons. Like anchor elements, they can contain arbi-
trary content, including other markup. Unlike anchors, buttons have a deined
appearance and behavior determined by the operating system. Depending on
which desktop and browser themes the user is using, buttons can look much
diferent than you expect. herefore, even though any content and markup can
be placed inside the
button
element, it is best not to have too much markup
and too many CSS styles there. As with anchor elements, the markup inside a
button should not contain any buttons, links, or other elements that respond
to mouse or touch actions. he efects of such constructions are unpredictable
and will confuse site visitors.
Drop Menus
A drop menu reveals a choice of options when it is clicked. he options stay
visible until the mouse or inger is moved outside that element. Drop menus
can be created using hidden elements, as described in Example 3.20 in Chap-
ter 3, “Elements of Style,” or by using a
select
element with an event handler,
similar to how buttons can be made into links. Like buttons,
select
elements
are rendered by the GUI of the visitor's operating system. hey are designed
to provide a similar appearance and experience as other applications that run
on that user's computer. To use a
select
element as a menu of links, add an
onchange
attribute. For example:
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="#">
Go to the...
</option>
<option value="about.html">
About Page
</option>
<option value="contact.html">
Contact Page
</option>
</select>
his code sets the
value
attribute of each
option
element to the destination
URL corresponding to that choice. he default for a
select
element is to show
the irst option when it is not activated. In this code snippet, the irst item
serves as a label, and its
value
attribute is set to the current page. Otherwise,
there would be no way to select that irst item.
As an alternative to using a
select
element or CSS drop menu, jQuery
provides a nice way to create a drop menu with a hidden element that appears
when another element is clicked. Example 5.4 shows how to create a simple
drop menu. It still needs CSS to make it look right (see the comments in the
code), but using jQuery helps ensure that it will work on most browsers.
