CSS3 Pop Nav Demo – About

Say you’re building a site that, for whatever reason, takes a while to load. Of course, you should do everything in your power to make it load faster, but if you’ve done that and the site still takes a couple of seconds to respond on average, why not give users something to take their minds off the wait?

Let’s call it CSS Pop Nav. It’s like the inverse of CSS Fast Nav! Go on, click the nav above!

This page uses CSS3 transitions to animate the nav when an item is clicked. It works great in recent versions of Safari (including on iPhone!) and Chrome, and kind of works in Opera and the beta version of Firefox 4. At the time of this writing (July 24, 2010), Microsoft has not announced plans to support transitions in IE9.

Here is the relevant code:

/* CSS */
nav a {
    opacity: 1;
    /* set up cross-browser transition properties */
    -webkit-transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out;
    -moz-transition: opacity 2.5s ease-out, -moz-transform 2.5s ease-out;
    -o-transition: opacity 2.5s ease-out, -o-transform 2.5s ease-out;
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
}

nav a.clicked {
    /* change the properties we want to transition onclick */
    opacity: 0;
    -webkit-transform: scale(50);
    -moz-transform: scale(50);
    -o-transform: scale(50);
    transform: scale(50);
}

nav a:hover {
    /* this property is not set up to transition */
    background: black;
}

/* JavaScript */
document.querySelector('nav ul').addEventListener('click', function (evt) {
    if ('A' === evt.target.tagName) {
        evt.target.className = 'clicked';
    }
}, false);