Advertisement

How to Create a CSS3 Wheel Menu

by

There's no better way to learn CSS3 than to get your hands dirty on an actual project and that's exactly what we're going to do. I'm going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let's get started on some CSS3 magic!

Today you'll be learning how to create the candy cane teardrop out of the many different styles and color variations available. You will receive all variations in the source files. Also as an added bonus I've added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. The source file even comes with its own documentation!

Note: Support for IE is limited at the moment. We'll mostly be going through this for the purpose of pushing the envelope with what we can do in CSS3... but as with all things on the edge of practicality, it means sacrificing a bit of stability. We will address the IE topic at the end of the tutorial though!


The Video Tutorial

We're offering this tutorial in two different formats today: A video as well as a full written tutorial below. Follow along with whichever method of learning you prefer (or both!) and we'll get you to the end in no time!


The Written Tutorial

The step by step written tutorial is below. Be sure to grab the full downloadable source as well!


Step 1: The Layers

The first thing we want to do is create some layers that will overlap each other and stay in place while using as little code as possible. It's important not to fill your code with a lot of bloat and not to create a lot of
unnecessary floats or absolute positioned elements, so we'll try to stay relative as much as possible.

The Code:

As you can see the code is pretty straight-forward. We have essentially stacked one layer on top of another and this way they'll be able to hold their positions.

Next we want to add an image to the center of the wheel, or teardrop in this case. To do that we'll simply add the following code in-between the wrap4 class and the completer class. This will lock the image to the center of the canvas. We'll just use a Rockable image for this one because they're awesome!

Now we'll want to add some styling to each layer one by one.

#menu-wrap:

This will be the main container for your wheel menu. It also contains any universal fonts and font sizes effecting anything that's inside of the div id="menu-wrap".

We'll go ahead and make sure that our center image is styled correctly by placing it in the center of the wheel using margins, adding some dimensions to it and a border.

All wrappers: We'll want to create some styles that apply to all main wrappers by adding a universal border radius, putting them all in the center, adding a relative position so that everything stays contained and pushing them down to to get the even layered effect.

.wrap1:

This is your biggest layer that sits behind all the others. We're going to create a gradient red background and use a solid red fallback for older browers. We'll also be using CSSpie to tell IE that it's ok to use these styles. After that all we need to do is add a width and height and you're done. You want to make sure the width and height are larger than all the other layers so that it shows behind them.

.wrap2:

Now for wrap 2 we're going to do the exact same thing only we'll use variations of white as the gradient, and add an outer and inner box shadow to create a slight bevel effect plus the backdrop shadow. Then we need to make the width and height about 40px smaller than the main layer to make it nice and even.

.wrap3 & 4:

We will now repeat the process for all the other wrappers using different colored gradients and making each layer 40px smaller than the last.

.wrap5 & .nav-holder:

Now we can style wrap5 and the nav-holder which will hold all the menu items in place and for the candycane style, we'll make it black to add a nice neutral contrast while wrap5 will be white and will serve as the container for the center image. What we're doing here is cutting out the background so that you can see through wrap5 and the nav-holder, making the other layers appear behind it as well as the center image. After making it transparent we'll add a black border to the nav-holder and a white border to wrap5. The nav-holder's border should be hidden on the right side (for the sub-menus), doubled on the left side (for the main menus) and solid for the rest creating a nice and easy effect while minimizing the amount of layers we have to add. Traditionally with this effect you could add up to 5 or 6 new layers, this saves a lot of code.

This time the wrap5 width and height will be 60px less than the other layers to make it nice and even again. Another 10px push at the top will help align the layer and an inner box shadow will give us a nice perspective of distance between wrap5 and the center image.

Adding a top of 0 to the nav-holder will automatically align the layers with the others. We'll also use a negative margin for further top-left alignment and create a proportional height/width to make it fit nicely on top of the other layers.

"The nav-holder's border should be hidden on the right side (for the sub-menus), doubled on the left side (for the main menus) and solid for the rest creating a nice and easy effect while minimizing the amount of layers we have to add."

Well that was easy enough. So after you've finish all of that, hopefully you've learned something new to add to your skill-set already. However, this is what you're creation should look like so far. If it doesn't look like this, please go through the code again and see if you may have missed something... don't worry, it's probably something very minor.

The Completers: Hmm... does this look incomplete to you? We need to top it off with a couple of layers I've called completers so that we can hide parts of the center image and bring the nav-holder further around the other layers creating a nice rounded effect and closing it off.

To do what I've just mentioned is fairly simple. We can make most of the styling apply to both completers for less code. Let's add a border radius to one side to make a nice curve, then we'll use transform to align the completer between wrap1 and wrap5. Adding our background color is very important or nothing will show up. We have to make this layer absolute positioned and move it around to the right and top to get it lined up perfectly.

.completer1 will have a display of none for this teardrop style. On other styles such as the wheel we've deleted that part to make so that it does display.

.completer2 has a little more rotation and we need to push it down a little to make it fit.

After you've added the completers then you should have something like this... Again if you don't have the same thing as what you see here, just check over your code and see what you missed.

Now we have a great set of layers to work with. They're all contained nicely and have smooth CSS3 effects so let's move on and get this baby working!


Step 2: The Navigation Menu Items and Sub-Menu Items

Now we want to add navigation links that look like they behind different layers. On the left side (in the double border) we want the main menu items and on the right side (in the open space) we want the sub-menu items to appear after a main item is hovered. You will be surprised how easy this is too accomplish so let's dig in.

The Code:

There is a hover block to keep the menus active as you pass over the wheel with your mouse and we want to make sure that covers the entire wheel, so for the sake of IE compatability we will add a background with a 0.01 opacity otherwise IE won't recognize that the element is even there.

Using margin-left: 76px ensures that you have enough room to hover over the main menu and the sub-menu as well as cross over the wheel without anything dissapearing.

Now we want to remove the bullet points from each menu item or [li]. We also want to make sure that they are relative to the nav-holder.

You can add a border radius for a little extra styling. We'll make the background a solid color and move the menu items to the left so they are barely touching the edges of the nav-holder.

The padding, text-indent and color are for extra styling and aren't required for the menu to function.

Now let's add a bit of gradient to the sub-menus and push it to the right and bump the first sub-menu item just barely to the edge of wrap5.

Adding a box-shadow will help us creat the effect of the sub-menu items being underneath their respective layers.

Putting margins on each sub-menu item will let us create more separation and give the effect of each one being underneath a different layer.

You can also add an opacity for each item to make it fade from top to middle and from bottom to middle where the middle item has full opacity.

Ok so you've added your sub-menu but it's still displays without any main menu being hovered over. To fix this we have to simply add a display none to the [ul].

So now it doesn't show up at all! Ok, let's go ahead and make it display after a main item is hovered over. By using li:hover > ul we can tell that when a main menu [li] is hovered over then we will show the [ul] for the appropriate sub-menu by using display:block.

Styling for each main menu item.

For pure aesthetics we can add a border radius, box shadow and background. What is necessary is to create the height, width, absolute positioning and top margin.

The top margin allows us to push the first menu item down to where we want it, then we can use less margin to push down the rest of the items.

For the remaining 3 menu items we're going to add a top margin to each for even spacing between them and a margin left to bump them against the different layers.

Next we need to make sure to add the rotation to each item so that we can nicely fit the menu around the wheel.

After taking care of the main menu items we're going to do the same thing for the sub-menu except for instead of making the menu items go around the wheel, we want them to be straight up and down. In order to do this we need to compensate for the rotation of the main menu by adding a rotation to each sub-menu.

Same as the main menu we need to add a top margin to even out the spacing between each one and push each sub-menu item to the right so they're even closer to their respective layers.

Finally we can add some optional styling to make the fonts faded out and then solid again when hovered over. This will bring each item to the front for the user when they hover over it.

These styles are not required for the menu to function but they do add some nice effects and increase usablility.

If you want to further style each individual sub-menu you can use the following code...

After you've finished the last part, you should have something like this... Once again if yours doesn't look like the image below don't worry, just go back and check your code.

Credits: The center image is from the envato assets library.


What about IE?

Well for IE we can use CSSPIE in a separate stylesheet. I won't go into it much because even with this fix IE doesn't display properly. If you know of a better fix, please let me know in the comments.

Using behavior we can call the csspie php file to tell IE that the CSS3 styles are ok to use. So here is how it will work...

A few other IE fixes go like this...


You're All Done!

So I hope you guys enjoyed this tutorial! Remember that CSS3 support is limited and if you want compatibility across all browsers ever created then there are other ways to accomplish the same task like using images and some javascript. If you'd like a tutorial on the other menu styles, how to use the javascript version or just how to use more awesome CSS3 effects, let me know in the comments and I'll whip some up for you! Leave your comments and questions below ;)

Be patient and keep learning and before you know it you'll be a master at whatever you do!

Advertisement