Swishy CSS3 navigation

Swishy CSS3 navigation

By Dan Voyce on | 5 comments

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:

  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.

5 comments

Comment: 1

What I'd like to know is why none of the big guys around the net, like Eric Myer, Zeldman and the like haven't moaned about CSS3 Transitions. I mean, they're neat and all, but it breaks the basic progressive enhancement core of layers: Structure, Presentation and Behavior.

What is the argument that will now justify that behavior doesn't only mean behavior of the user? Presentation is now allowed to encroach on the behavior layer?

Not crappy about this, I've just never heard or read anything about why the modules for CSS3 are suddenly ok to break all the early rules?

Comment: 2

CSS3 helps define these layers more clearly. Animation was always meant to be in the presentational layer, but CSS never had the power to do so. For years we've been using JavaScript to do advanced presentational effects, now there is no need... We can allow CSS to take care of these advanced presentational effects, and allow JavaScript to focus on the true behavioural aspect.

Comment: 3

CSS3 helps define these layers more clearly. Animation was always meant to be in the presentational layer, but CSS never had the power to do so. For years we've been using JavaScript to do advanced presentational effects, now there is no need... We can allow CSS to take care of these advanced presentational effects, and allow JavaScript to focus on the true behavioural aspect.

Comment: 4

Hmm... well I didn't know that animation was to be on the presentation layer. I can make the jump to that...like the clothes a presenter wears and his personality and the presentation itself etc.. I just think anything besides color, size, margins and such become part of something else.

Comment: 5

@thumbslinger:

Actually, I have a slightly different view from Dan: I don't think "animation" can be considered part of the "presentation" layer necessarily. It can be viewed as part of the behaviour layer.

But to answer your first question: The reason guys like Zeldman and Meyer don't say anything about this rule breaking is either that they believe as Dan does (that animation falls under the category of "presentation") or else they realize that hard-and-fast rules are not always reliable.

In other words, it doesn't matter if we're combining presentation and behaviour? The benefits to separating those two things are highly overrated. If it solves a problem, then do it. But if it doesn't, there's no point in being dogmatic about something that has very little tangible benefit.
August issue on sale now!

The Week in Web Design

Sign up to our 'Week in Web Design' newsletter!

Hosting Directory
.net digital edition
Treat yourself to our geeky merchandise!
site stat collection