How to Create a Fancy CSS3 Menu

Fancy CSS MenuIt’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;

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.

What say you?

  1. Freak says:

    Nice tutorial. I’ll try this out later on.

  2. Newid says:

    I am now learning css and this tutorial is exactly what I need.
    About the fixed width problem referred, I am not sure you are talking about the sub menus’ height or the menu’s width.
    For the sub menus’ height , I think this will work.
    #menu > li.tutorials:hover ul{
    height: auto;
    }

    For the menu’s width, I will give #menu > li a fixed width and set the first li class=first, the last li class=last and then define border radius to them.

    Sorry for my poor English and hope it will make sense.

    1. Jamy Golden says:

      I mean the sub-menu should have a fixed width.

      height: auto; – would work, however the animation effect (currently animating in Safari and Chrome) would disappear.

  3. sol says:

    your the best i was looking for this for a loong time thanks a million….

    1. Jamy Golden says:

      I’m glad it helped =)