A Brief Introduction

If you’ve used the internet at all in the last year or so, you may have noticed a surge of fancy rounded corners, shadows, animations, and effects. CSS3 has been the backbone of much of this activity, and the new features included in the third version are pushing the web to new limits. Today, we’ll use a lot of these features, and see how we can combine them to create an excellent looking menu. The menu will be similar to the dock style navigation found on Mac OS, and should provide an excellent jump start on some CSS3 techniques.

Step 1: The HTML

We’ll need an unordered list of element to represent each of our navigation elements, and a wrapper to hold them. This will serve as the base for our project, and should look like this:

Step 2: The CSS

All of our navigation elements are currently in an unordered list. This means that by default, they fall vertically, one below the other, and have a bullet next to them to denote that they are list items. We can remove the bullets by using the list-style-type:none declaration on our unordered list, and use float:left to make them horizontal. Here’s what that should look like.

Next, we’ll need to style out our <a> tags since the links are the main part of any navigation. In our project, our links will be circular, so we’ll add some border-radius declarations, and fancy them up a bit with some shadows. Here’s the next iteration in the CSS:

Alright, now we’re getting somewhere. In the full version of the source code we’ve also done some positioning to make the buttons appear more toward the center of the screen. Be sure to download it to see the extra goodies. Anyhow, before we get into colors and whatnot, we should get a grip on the “zoom” functionality. When a user hovers over a link, we need to scale it up to be a bit larger. We’ll need to use the :hover pseudo class in order to do that. Here’s what it looks like:

So, if you view the page now, you’ll see that our navigation elements do in fact zoom. However it is an instant zoom with no transition at all. The next step is to add the following lines to our #navWrapper li a declaration:

A Few Last Words

This has been an example of how simple it can be to make a pretty good looking navigation setup using nothing but CSS. It would be beneficial to go through the source code and check out some of the extra things going on like margins and padding, so that you can get a feel for some of the fundamentals of CSS as well. We’ll be back next time with another fun CSS project, and we hope to see you there!

Download Source Files