ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
You can use any of these approaches to highlight the current page in the more advanced navigation
examples you will create in the next section.
Horizontal Tab Navigation with CSS3 Transitions
As a more advanced example of site navigation, you can include movement on “tab” navigation. In this instance,
you’ll put the links in an ordered list to provide more structure, as you did in Listing 4-2. You’ll create the visual
impression of tabs by setting the links side by side, adding a border-radius to their top-right and top-left
corners and placing a gradient in the background of each, per Listing 4-13. This will produce a menu as shown in
Figure 4-3.
Figure 4-3. An animated tab navigation system
In this example, you’ll use an attribute selector to gain access to the list items and links.Listing 4-13. CSS to Style Navigational Links As Tabs
ul[role=navigation] li {
display: inline; font-family: Futura, Arial, sans-serif;
text-transform: uppercase;
}
ul[role=navigation] li a {
text-decoration: none; color: #fff;
padding: 0.8rem 1.2rem 2rem 1.2rem;
border: 1px solid #777; border-radius: 5px 5px 0 0;
background: linear-gradient(to bottom, #dfc891, #776c51);
box-shadow: 0 0 15px rgba(0,0,0,0.5);
letter-spacing: 0.15rem; text-shadow: 0 1px 0 #000;
}
Next, you want to overlap the tabs slightly. You do that by providing a negative margin-left to each list item.
The tabs will be moving up on mouseover, so you deliberately make them longer than they need to be in their
normal state. Use overflow: hidden on the unordered list to hide the excess at the bottom edge, as shown in
Listing 4-14.
Listing 4-14. CSS to Style Navigational Links As Tabs
ul[role=navigation] {
background: #000; padding-top: 3.2rem; padding-bottom: 1rem;
overflow: hidden; margin-top: 0; }
ul[role=navigation] li {
display: inline; font-family: Futura, Arial, sans-serif;
text-transform: uppercase; margin-left: -.5rem; }