Swishy CSS3 navigation


CSS3 offers so many possibilities to create cool rollovers on website menus. Dan Voyce explains how he created the effect on Graphite Design’s site

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:

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.

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.

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 …

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.

Voilà! Your beautiful rollover effect is finished!

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