This is a tutorial on how to use some of the new CSS3 fetures to create a 3d pop out navigation element like the image below.

You can also use this same theory to create some interesting buttons or design elements.

The code is quite concise and requires no images so it’s a reasonably light load to add some quite interesting functionality to your site.

Before we start I must confess that this method doesn’t quite work perfectly across all modern browsers. Those lagging behind in the CSS3 race will not animate properly and the navigation will just pop out instead of the nice smooth hovering effect we are trying to achieve. So your better off using Safari 4.x and Chrome to test this method out.

Let’s start with the html!

<div id="container"> <!-- Positioning div that stops the following code sitting in the top left of the browser -->
<div><h1>Website title</h1></div>
<div> <!-- Containing div for our navigation -->
<div><a href="#"> Element 1 </a></div> <!-- Navigation elements each with the mandatory box class and a colour class to make them a little special 🙂 -->
<div><a href="#"> Element 2 </a></div>
<div><a href="#"> Element 3 </a></div>
<div><a href="#"> Element 4 </a></div>
<div><a href="#"> Element 5 </a></div>
</div></div>

In the above code the only elements that are mandatory are the divs inside the nav. The rest is just to make it look a little prettier and to make it sit in the middle of the page, similar to if it was being used in a website.

Now for the CSS!

/* ANIMATION CLASS */
@-webkit-keyframes navAnim {
from { width: 100px; height: 37px; left:-23px; top:-23px; -webkit-animation-timing-function: ease-out; }
50% { width: 100px; height: 37px; left:-23px; top:-19px; }
to { width: 100px; height: 37px; left:-23px; top:-23px; -webkit-animation-timing-function: ease-out; }
}

This is the code for our CSS3 animation. The from, 50% and to classes are key points in the animation. From is the starting point wich is 23px above and to the left of the non-hover state. 50% is our half way point in the animation and is only 19px above our starting non-hover state so the box will drop by 4px. The to class is our ending point in the animation, because this is a loop it is the same as the starting point.

Now that we have the animation sorted, let’s get the button styled.

#nav div { float:left; }

We use the above code the make sure all of the divs inside our nav element float next to each other.

Next we have the styling for the a tag.

There is a lot in here so I will try to break it down as best as I can.

a.box { /* Styling for the a tag, this creates the 3d effect using box shadow */
float: left; width: 100px; height: 37px;

As you can probably guess, the above code sizes the a tag to 100px wide and 37px wide, you may need to make the width across all css classes slightly wider depending on the content of your navigation.

font-size: 16px;
text-decoration:none;
background-color: #3c454b;
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: middle;

The above code handles the styling of the text inside our navigation. We are setting the font size to 16px and using text-decoration to remove the underline on the link. The background colour is a dark grey and the text color is set to white. We are alo making the text bold using font-weight and aligning it to the center of our nav.

-webkit-box-shadow: 1px 1px #18242c, 2px 2px #18242c, 3px 3px #18242c, 4px 4px #18242c, 5px 5px #18242c, 6px 6px #18242c;
-moz-box-shadow: 1px 1px #18242c, 2px 2px #18242c, 3px 3px #18242c, 4px 4px #18242c, 5px 5px #18242c, 6px 6px #18242c;

Now for the fun stuff! We use box shadow to create our 3d effect. The way this works is it creates a block the same size as our nav element, with the colour provided and offsets it by the amount of pixels specified. So 1px 1px #18242c creates a very dark box and moves it down and right by 1px. We do this several times to create a solid 3d effect instead of a drop shadow effect. Another thing to note is that we have to do this for both webkit and moz based browsers.

-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;

This handles the transition into our animation that we are going to call on our hover class. We are telling the browser to transition into the animation in 0.12 seconds and to eas-out wich means the animation gets slower towards the end.

-webkit-border-radius: 0px;
border: 1px solid #0b161e;
}

Next we declare a simple 1px border to our nav and that is our static button fully styled.

Next is the hover state.

a.box:hover { /* Styling for the hover state, re positions the div and calls the animation */
left:-23px;
top:-23px;
width: 100px;
height: 37px;
-webkit-animation-name: navAnim;
-webkit-animation-duration: .7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .12s;
}

This CSS is only activated when your mouse is hover over the nav element. Firstly we move the div 23px up and 23px left using minus left and top values. We then call the animation we created previously called navAnim. We also need to tell the browser how long we want this animation to last using the -webkit-animation-duration class and how many times it should loop. By using infinite we can create a constant loop. We also need to delay the animation by 0.12 seconds so that we give our previous transition classes a chance to finish.

I have also added a few background colours to the different nav elements which you can see below, these are purely for decorative perposes and the 3d hovering effect will work fine without these.

/* COLOURS */
a.box.blue:hover { background-color:#41bfce; }
a.box.green:hover { background-color:#41ce4b; }
a.box.yellow:hover { background-color:#ccce41; }
a.box.orange:hover { background-color:#ce8041; }
a.box.red:hover { background-color:#ce4141; }

So that’s it!

You can find the files for this tutorial here should you wish to download them.