Creating A Zooming Menu in CSS

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.

I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

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:

Code Block

Ask a Question

Download Source

Index.html

the basic html
(download full source code @ end of tutorial )

    <nav id="navWrapper">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Notes</span></a></li>
            <li><a href="#"><span>Music</span></a></li>
            <li><a href="#"><span>f.a.q</span></a></li>
        </ul>
    </nav>

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.

Code Block

Ask a Question

Download Source

Style.css

laying the navigation out horizontally and removing
the list item bullets.

#navWrapper ul
{
    list-style-type: none;
}
#navWrapper li
{
    float: left;
}

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:

Code Block

Ask a Question

Download Source

Style.css

making the elements circular and shadowed.

#navWrapper li a
{
    background-color: White;
    border: 1px solid;
    color: Black;
    display: block;
    height: 1em;
    margin: .25em;
    padding: 2em;
    text-decoration: none;
    width: 1em;
    -moz-border-radius: 50px;
    -moz-box-shadow: 2px 2px #999;
    -moz-transition: .5s ease-in-out;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 2px 2px #999;
    -webkit-transition: .25s ease-in-out;       
}
#navWrapper li a span
{
    position: relative;
    right: 10px;    
}

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:

Code Block

Ask a Question

Download Source

Style.css

adding the zoom effect.

#navWrapper li a:hover
{    
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);      
}

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:

Code Block

Ask a Question

Download Source

Style.css

adding the transition effect.

-moz-transition: .5s ease-in-out;
-webkit-transition: .25s ease-in-out;


This will give us the transition effect that we're looking for in our navigation, and is an amazing feature in CSS3. We've essentially created a small animation in just a few lines of code.

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!

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

download source files