Tutorial – Pure CSS Navigation Menu

Designing a rich looking navigation is not the herculean task it seems to be. Here’s another easy tutorial which will help you design a navigation bar from scratch using just CSS and no images.
Alright, here we go…

The final product

This is what your nav bar will look like at the end of the tutorial. You only need a basic knowledge of CSS to pull this off, so no worries.

The solution

Menus driven purely by CSS have always been the ideal solution when it comes to navigation. However, we all know that we have been forced to use simplistic designs or images because of limited CSS and browser capabilities sometime or the other. You’ll be happy to know that with the advent of CSS3, it is easier than ever to create flexible, and simple yet creditably good looking navigation menus.

Please note that this will work only on modern browsers, but it does have a fall-back for IE and other older browsers.

The markup

Let’s start with the html markup for the navigation. We’ll keep it very simple and straightforward here.

<ul class="cssTabs">
	<li class="active">Home</li>
	<li>About us</li>
	<li>Our Services</li>
	<li>Contact us</li>           
</ul>

Step 1 – The basic CSS

Now, let’s style the navigation with the basic parameters.

ul.cssTabs {
	background: #848383;
	border:solid 1px #606060;
	padding: 0 75px;
	width: 405px;
	margin:20px;
	font-size:12px;
	font-weight:bold;
}
 
ul.cssTabs > li {
	background:#989898;
	color:#3a3a3a;
	border:solid 1px #606060;	
	border-bottom:0;	
	display: inline-block;
	margin: 10px 1px -1px;
	padding: 8px 20px;
}
 
ul.cssTabs > li.active {
	background:#ededed;
}

Done? Great! It should look like this now:

This should be pretty self-explanatory. This is also what the fall-back will look like.

Step 2 – Gradients, box-shadows and rounded corners

We now get down to the main business of using CSS3 capabilities. Add the following code to the ul.cssTabs class:

	background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
 
	box-shadow: inset 0 1px 0 0 #dfdfdf;
	-moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
	-webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 
	border-radius: 8px 8px;
	-moz-border-radius: 8px 8px;
	-webkit-border-radius: 8px 8px;

If you are not sure how this works, check out my earlier tutorial which explains this in detail.

Step 3 – Styling the list items

Using the techniques described above, we add these styles to the list items (ul.cssTabs > li):

	background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 
	box-shadow: inset 0 1px 0 0 #dfdfdf;
	-moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
	-webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 
	text-shadow: 1px 1px 0 #d3d3d3;

As you can see, the text shadow is added to highlight the text.

The final step – Active list

And finally, let’s add a different style to the active list item (ul.cssTabs > li.active).

	background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 
	box-shadow: inset 0 1px 0 0 #fff;
	-moz-box-shadow: inset 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 0 #fff;	
 
	text-shadow: none;

Conclusion

Like what you see? Click on the download button to get the code. It also includes three different color schemes. And try out your own colors too!
Have fun and ciao for now.