CSS-Plus
CSS-Plus
Play with web technologies

How to Create a Fancy CSS3 Menu

December 09, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
How to Create a Fancy CSS3 Menu

It's good to know and keep up with the latest CSS tricks, especially with all the latest browsers on the verge of coming out.

In this tutorial, I'm going to create a navigation menu that relies heavily on CSS3. The purpose for this is to learn about CSS3 Properties you might not have already known, see them in use and perhaps get you to dream about the things developers will be able to do without relying on other technologies such as javascript.

If you're not sure how to create a standard navigation menu, have a look at these tutorials.

CSS3 Properties to keep your eyes on

  • Gradients
  • Border-Radius
  • Text-Shadow
  • Transition

The Standard HTML

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li class="freebies">
		<a href="#">Freebies</a>
		<ul>
			<li><a href="#">Accordions</a></li>
			<li><a href="#">Menus</a></li>
			<li><a href="#">Sliders</a></li>
			<li><a href="#">Zoomers</a></li>
		</ul>
	</li>
	<li class="tutorials">
		<a href="#">Tutorials</a>
		<ul>
			<li><a href="#">CSS</a></li>
			<li><a href="#">HTML</a></li>
			<li><a href="#">Javascript</a></li>
		</ul>
	</li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

The CSS

#menu{
	/* fallback color */
		background-color: #f1f1f1; 
		
	/* Gradient support for IE9 and Opera */
		background-image: url(../images/svg-gradient.svg); 
		
	/* Mozilla Gradient Support */
		background-image: -moz-linear-gradient(100% 100% 90deg, 
			#ccc, #f1f1f1);
							
	/* Webkit Gradient Support */
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
			from(#f1f1f1), to(#ccc));
							
	/* Rounded Corners */
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-radius: 10px;
		
	/* Box Shadow */
		-moz-box-shadow: 0 0 5px #5C5C5C; 
		-webkit-box-shadow: 0 0 5px #5C5C5C; 
		box-shadow: 0 0 5px #5C5C5C; 
		
	height: 30px; 
	font: 18px Georgia, serif; 
	margin: 0 auto; 
	width: 640px; 
}
#menu li{
	float: left; 
	padding: 0 23px; 
	position: relative; 
	line-height: 30px;
}

#menu > li ul{
height: 0;
overflow: hidden;
position: absolute;
left: 0;
top: 30px;

    -moz-transition-property: height;
    -moz-transition-duration: 0.2s;
    -moz-transition-timing-function: linear, ease-in;

    -webkit-transition-property: height;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear, ease-in;

    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: linear, ease-in;

}

#menu > li > ul{background: #cdcdcd;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#menu li li{
margin: 4px 0;
font: 14px Arial, Helvetica, Verdana, san-serif;
text-shadow: none;
}
#menu > li.freebies:hover ul{
height: 100px;
}
#menu > li.tutorials:hover ul{
height: 75px;
}

#menu a{
color: #333;
padding: 1px 10px;
text-shadow: 1px 1px 2px #999;
}
#menu a:hover{
background: #d6d6d6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The Transition property

transition-property: height; 
transition-duration: 0.2s; 
transition-timing-function: linear, ease-in;</code></pre>

transition-property: height – The property transition should affect transition-duration: 0.2s; – The durtion; transition-timing-function: linear, ease-in; – This is

Read more about this at Onextrapixel.

What's up with the .svg file?

This is used to achieve a scalable vector within IE9 and Opera.

Yes, I know it is possible to create a CSS gradient within IE without the help of weird file-type, but I've stuck to the .svg file as this is future proofs the menu. Visit CSS3 Wizardry to find out more about this.

These gradients are confusing!

If you're still finding the gradients a bit overwhelming, have a look at Chris Coyier's article: Speed up with CSS3 gradients

What are the downsides to using this?

There are two major ones I can see.

Browser Compatiblity

It does not work in IE6, it's a bit funky in IE7 and it works in IE8, but without all the CSS3 which makes it look a bit bland.

Luckily if a browser doesn't support the transition property it will still work and look good, except for the sliding hover effect.

Dynamic Menus

You might have noticed that I've given both sub menus a fixed width. This means that if I add another item, it won't dynamically grow. I've been trying to find a work around for this (without javascript) but I haven't found a solution as of yet. If you manage to find one, let me know and I'll add it.

Conclusion

It wasn't too long ago when I wouldn't even consider using border radius, and now I would most probably add a few CSS3 transitions here-and-there for the 'cool kids' who have the latest browsers. As you would have noticed, throughout this article I've linked to a few articles that go into more depth about the these properties.

I hope you've learnt something from this brief tutorial.

Demo