CSS3 Animated Navigation With nth Selector

I’ve done a couple of tutorials on CSS3 now, but I wanted to quickly cover how you can utilise the nth selector.

One of the many good things about CSS3 is that we don’t have to rely on image sprites for our navigation. This tutorial will look at how you can essentially have a double lined navigation with one hidden until rollover.

View Demo > >

The HTML

First we create a standard navigation list. Each list item will contain two link tags for the first and second line navigation item.

 <div id="nav-wrap">
    <ul class="nav">
    <li><a href="#">Home</a><a href="#">What we do</a></li>
        <li><a href="#">About</a><a href="#">Get to know us</a></li>
        <li><a href="#">Contact</a><a href="#">Get in touch</a></li>
    </ul>
    </div>

Basic CSS

#nav-wrap{width:100%; float:left; margin:0 0 20px 0;}
.nav{width:100%; float:left;overflow: hidden; height:55px; text-align:center;}
.nav li {float: left;margin: 0 10px;list-style-type: none;}
.nav a {display: block;background: #fe7d43; color: #fff;height: 55px; width: 200px; font-family: 'Amaranth', sans-serif; font-size:1.7em; text-decoration: none; line-height:53px;font-weight:100; }

You will now see the first line of text with the background colour applied. If you remove the overflow:hidden you’ll be able to see both lines of text.

Using nth Selectors

Now we need to change the styling for the second link using the nth selector.

.nav a:nth-of-type(even) {background: #353535;color: #fff; font-family: 'Lato', sans-serif; font-size:1.5em; font-style:italic;}

The nth-of-type(even) is calling the second link from each li. Using selectors allows us to choose which link we want to use rather than using id’s and classes.

We’ve styled up the link but we need it to appear when you hover. Here is where we can use the first:child pseudo element.

.nav li:hover :first-child {margin-top: -55px;}

We can use a bit of the CSS transition to get a nice easing effect for the final touches to the navigation.

.nav a {display: block;background: #fe7d43; color: #fff;height: 55px; width: 200px; font-family: 'Amaranth', sans-serif; font-size:1.7em; text-decoration: none; line-height:53px;font-weight:100; -webkit-transition: margin .6s ease-in-out;-moz-transition: margin .6s ease-in-out;-o-transition: margin .6s ease-in-out;-ms-transition: margin .6s ease-in-out;transition: margin .6s ease-in-out;}

You could achieve the same effect with JQuery but I think its important to start using CSS3 and it also reduces the amount of scripts you use on your website!!

Last updated by Anneka at November 11, 2011.