ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementSBegin with the code shown in Listing 4-9.Listing 4-9. Markup for a Visual “You Are Here” Effect on Site Navigational Bars
On index.html:
about.html:
Targeting the link that represented the current page is then a simple process of grouping a series of
descendant selectors, show in Listing 4-10.
Listing 4-10. CSS to Highlight Current PageLinks
#home nav a.home, #about nav a.about { background: rgba(0,0,212,0.6);}
It’s also possible to achieve this effect with an embedded stylesheet on every page that addresses each link
class individually. Both approaches have the same disadvantage: they require customizing the markup for each
page. A better solution may be a combination of CSS and JavaScript (shown here in the form of JQuery).
The HTML returns to what you had in the beginning (Listing 4-1), and your stylesheet simply takes a new
class, shown in Listing 4-11.
Listing 4-11. CSS to Highlight “You Are Here” Links via JavaScript
a.current { background: rgba(0,255,0,0.7); }
In the head of every document you include the code shown in Listing 4-12.Listing 4-12. JavaScript to Apply a “You Are Here” Class to Site Navigation