Swishy CSS3 navigation

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.