Your Customers are Mobile, you will be too …

As requested here is a simple tutorial on how to create a vertical menu that slides out when moused over. Unlike the standard CSS vertical menu that pops out instantly or simply changes color instantly this menu will slide out smoothly using a few of the CSS3 standards.

Before beginning this tutorial it would be a good idea to familiarise yourself with the basics of CSS menu’s. I have a tutorial up on this already Basic CSS Hover menu. Make sure you still have the code from this as we will apply this slide out effect to the previous menu for practice.

For the purposes of this exercise we are going to make the vertical menu items slide out and grow 100 px in a smooth transition. So first we need to do is add this width to the verticalmenu ul li a:hover tag. While we are at it we will also make sure that the menu doesn’t try to hide behind other things by giving it a z axis of 100. So go ahead and add this code.

width: 300px;
z-index: 100;
position: relative;

Remember to add the position relative or it won’t work. We also need to add the same code to #verticalmenu ul li a tag so that when we stop hovering over the element it doesn’t instantly hide behind any other content we have on the page.

Ok now if we hover over menu items they instantly stretch out by 100px and expand over the top of other content if need be. But we want this slide out smoothly not just flash bang its there. So now we need to tell the #verticalmenu ul li a tag that we want to come out slower using the transition property.

transition: width 0.5s;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari and Chrome */
-o-transition: width 0.5s; /* Opera */

The top line is the CSS standard which hopefully all browsers will eventually use. For now we have to use the prefixes for Firefox etc. Notice IE isn’t in there surprise surprise it doesn’t support transitions yet so the menus will just pop out for them no animation. Now transition command will take the arguments given to it as follows:

On hover we will change the width and we will transition it over half a second.

If we like we can also add a delay:

transition: width 0.5s 0.5s;

Now the second 0.5s tell it to wait half a second before beginning. We can change the width to height or color or any other property we like or by putting “all” in there it will make all changes between the hover and normal states transition smoothly.

Hope you all enjoy.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: