Pro CSS3 Animation

(Tuis.) #1
ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS

Begin 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



Free download pdf