Swishy CSS3 navigation

• Knowledge needed: HTML, CSS
• Requires: Web editor, browser
• Project time: 30 minutes
• Download source files

This article first appeared in issue 225 of .net magazine – the world's best-selling magazine for web designers and developers.

Here’s a simple way to spice up your navigation with just a sprinkle of CSS magic. This technique, which we used on www.graphitedesign.com, takes your typical list based navigation and adds a nice rollover effect. Obviously this is only visible on modern browsers, but it fails very gracefully for the others.

HTML: We’ll start by creating our buttons for the nav. We’ll wrap them in an unordered list like so:

1. <ul>
2. <li><a href="/iGR/">iGR Inc</a></li>
3. <li><a href="/eurospares/">Eurospares</a></li>
4. <li><a href="/pcs/">Performance Car Solutions</a></li>
5. <li><a href="/rcm/">The Royal College of Midwives</a></li>
6. <li><a href="/juiceDoctor/">Juice Doctor</a></li>
7. <li><a href="/hospitalityLine/">Hospitality Line</a></li>
8. <li><a href="/greenwichPartners/">Greenwich Partners</a></li>
9. <li><a href="/bar-B-Kings/">Bar-B-Kings</a></li>
10. </ul>

CSS: Nothing too complex here. First we set the width we want the box around our nav (in this case the unordered list) then set the background colour.

1. ul{
2. width: 230px;
3. background-color: #303728;
4. }

Next we’ll style up the buttons. We’ll start by making them block level, so that the whole area reacts to the mouse. We’ll then set the width, padding and margin. Chuck some top and bottom padding so that the text sits centrally on the button, and some bottom margin so the buttons have some space. Finish by setting the text colour and applying a border to the bottom of the button.

1. li a{
2. display: block;
3. width: 196px;
4. padding: 3px 4px;
5. margin: 5px 13px;
6. color: #969E8D;
7. border-bottom: 1px dotted #96BF1F;
8. }

We’ll now set the rollover effect. A contrasting background colour, the text colour and the transition properties. We’re going to transition the background colour and set it to just 0.01 seconds. What’s the point of the transition if it’s that quick? You’ll see …

1. li a:hover{
2. background-color: #96C11F;
3. color: #fff;
4. -moz-transition: background-color 0.01s;
5. -webkit-transition: background-color 0.01s;
6. -o-transition: background-color 0.01s;
7. transition: background-color 0.01s;
8. }

If you go ahead and test this in your browser, this will give you an idea of how the older browsers will be seeing this. Now just a few lines of CSS to reward users for using a modern web browser … We’re going to add the same transition to the button, but we will make this transition slightly longer, at 0.3 seconds. We’ll also add the “ease-in” function to enhance the effect slightly.

1. li a{
2. display: block;
3. color: #969E8D;
4. width: 196px;
5. padding: 3px 4px;
6. margin: 5px 13px;
7. border-bottom: 1px dotted #96BF1F;
8. -moz-transition: background-color .3s ease-in;
9. -webkit-transition: background-color .3s ease-in;
10. -o-transition: background-color .3s ease-in;
11. transition: background-color .3s ease-in;
12. }

Voilà! Your beautiful rollover effect is finished!

Discover 101 CSS and Javascript tutorials at our sister site, Creative Bloq.