ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
The code resembles what you started with in Listing 4-1 (without accesskeys, which have been omitted in
this example to save space). The navigation role has moved back onto the nav element, which has also gained a
label describing its purpose, the assistive equivalent of a title tooltip.
Each list item has a role of menuitem, indicating that it is actionable, and a tabindex of either 0 (indicating
that it can be jumped between by using the TAB key) or -1 (meaning that other controls, such as the arrow keys,
must be used to focus them). Finally, the list item containing the submenu has an aria-haspopup attribute and
the submenu itself has an aria-hidden attribute to indicate that it is not visible by default.
To this, you’re going to add some basic CSS, shown in Listing 4-31.
Listing 4-31. Code for a CSS3 Drop-down Menu
body { font-family: Futura, Arial, sans-serif; }
nav { height: 41px;
background: linear-gradient(to bottom, rgb(93,146,207) 0%, rgb(79,79,181) 100%); }
nav ul { margin: 0; }
nav, ul.submenu { background: #35f; border-radius: 5px; padding: 0; }
nav ul li { display: block; width: 150px; text-align: center; float: left; margin: 0;
padding: 0; }
nav li:hover { background: rgba(0,0,0,0.4); }
nav a { color: #fff; text-decoration: none; display: block; padding: 10px; }
nav ul.submenu { background: rgba(0,0,0,0.8); position: relative; border-radius: 0 0 5px 5px;
height: 0px; overflow: hidden; }
nav ul.submenu li { float: none; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.3); }
The code in Listing 4-31 should be fairly self-explanatory: the main list items are floated side by side, with
the submenu placed below and, in this case, hidden, by setting its height to 0.
The implementation of CSS3 in most current browsers requires you to set explicit measurements when
transitioning an element’s dimensions; neither height: 100% nor height: auto will work in this case.
Additionally, you want the same transition effect to be added to multiple elements; rather than repeating yourself,
you add the declaration at the top of Listing 4-32.
Listing 4-32. CSS for an Animated Drop-down Menu
nav ul li { transition: .3s all linear; }
nav ul li:hover ul.submenu { height: 126px; }
This markup and CSS can become the basis of many interface designs. For example, with some small
adjustments, vertically expanding “accordion” menus can also follow this template.
Initiating CSS3 Transition Effects After a Button Click
In most standard HTML, there’s no way of recording state; that is, you can capture the action of the user’s mouse
over an element (:hover), pressed down (:active), and in some cases, entered within an element (:focus), but
there are few immediately obvious ways of saying “if this element is clicked, do this; but if it’s off, undo the action.”
You do have a few options with CSS, however. The state of both the checkbox and radio elements is readable
by CSS through the use of the :checked pseudo-class. By hiding the checkbox but maintaining accessibility
through the use of an associated label element you can use CSS to “switch” the presentation of the page.