ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementSListing 4-29. CSS for a Button Reveal Transition
button { transition: .6s all ease-in-out; }
button:hover { width: 290px; color: #fff; text-shadow: none; }
button:hover span.hidden { width: 120px; padding: 22px; }
Accessible Horizontal Drop-down Navigation
with CSS3 Transitions
Drop-down menus are a common navigational option for complex websites. Users are already familiar with the
format in the UI on their computers, so using the same interface design on websites makes sense. See Figure 4-7
for an example.
Figure 4-7. A drop-down menu
Drop-down menus on HTML pages have traditionally been created using Flash or JavaScript, but these tools
share a significant disadvantage: menus created with them can be difficult for the disabled to use with screen
readers and/or keyboards.
By using ARIA features in HTML5 markup with CSS3 transitions, you get the best of all worlds: UI elements
that are accessible, visually appealing, and animated. The basic markup is shown in Listing 4-30.
■ Tip You can learn a lot more about ARIA roles at http://www.w3.org/TR/wai-aria/roles.
Listing 4-30. HTML for an Accessible Drop-down Menu