How to Code an Overlapping Tabbed Main Menu

Our Blog

Writings, Sharing Knowledge, News, Tutorials

As a web developer, what do you enjoy coding the most?
- xHTML
- PHP
- CSS
- Javascript (Includes libraries like jQuery, Moo Tools etc.)
- Other
View Results
Loading ...

How to Code an Overlapping Tabbed Main Menu

October 14th, 2009 - By Sumeet

Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

Live Demo Download

There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! Written by Collis from NetTuts.com This ended up being the main inspiration for my site and while going through the tutorial I found Collis saying that:

” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build. “

So I tried coding one into html and after I succeeding thought of sharing it with you all.

Step 1.Gearing Up

So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. The above tutorial is very detailed and Collis does a great job in teaching how to build such a menu in photoshop. I have built one simple one specially for this tutorial.

Now let me specify that there are three states of the tab.The inactive state is grayish in colour, the active state is deep blue and the hover state is light steel blue colour. Hence, rather than slicing up three images for each tab, we can slice out an image sprite.

Step 2. Slicing The Tabs From the PSD

Align the tabs vertically using grids as shown in the image above. You can also align the tabs horizontally rather than vertically but then the CSS background image position will be accessed in a different way. The choice depends on person to person but both work perfectly. While cropping the image follow the guidelines properly and note that I have made the background transparent because we will be needing a transparent background if we need to overlap the tabs. Crop the image and save it for web in PNG24 format. One more point to note while slicing up the images is that the first tab i.e. the ‘Home’ tab should not be having any shadow on its left edge in the inactive state. Hence, for that specific tab we have to create another sprite without the shadows in it.

Step 3. Code Away

Now that our slicing is complete and we have all the images needed we can start coding our navigation bar. Just to make the example look good, I have constructed a sample featured content area layout with the overlapped navigation bar. The whole layout looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="page-wrap">
		<ul id="main-nav">
			<li class="current"><a href="index.html">Home</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="services"><a href="services.html">Services</a></li>
			<li class="about"><a href="about.html">About Us</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
		<div class="clear"></div>
		<div id="featured">
			<div id="featured-content">
			</div>
		</div>
	</div>
</body>

</html>

Lets look at our main navigation menu. I have used a simple unordered list as any other navigation bar and styled it using a background image to the list’s hyperlink tag.

<ul id="main-nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="about"><a href="about.html">About Us</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

ul#main-nav li {
	float: left;
	position: relative;
	display: inline;
}

Remember that we are using an image sprite for the tabs in which the top most tab represents the active state, the middle represents the inactive state and the bottom represents the hover state. Hence, we will use the ‘background-position’ property to properly place the images to their respective state as follows:

ul#main-nav li a {
	position: relative;
	width: 110px;
	height: 29px;
	display: block;
	background-image: url('../images/tabs.png');
	background-position: center center;
	color: #44403b;
	text-decoration: none;
	font-size: 14px;
	padding-top: 12px;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
}
ul#main-nav li.home a {
	background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
	background-position: top;
	color: #ffffff;
}
ul#main-nav li a:hover {
	background-position: bottom;
	color: #ffffff;
}
ul#main-nav li.current a:hover {
	background-position: top; /*To Prevent the Current tab from changing colour on hover*/
	color: #ffffff;
}

You will notice that I have given a relevant class to each of the list elements and a class named ‘current’ to the tab which is for the current page. This is done so that I can assign different z-index values to each tab in an ascending order such that each tab lies at a higher z-axis than the tab following it. The tab with the class ‘current’ will lie at the highest order of the z-axis because it represents the current page and will always stay on top irrespective of it’s position in the list. Before applying the z-index values, make sure that the position attribute for the list element is set to relative. Without any positioning value the z-index property won’t work at all.

ul#main-nav li.current {
	z-index: 100;
}
ul#main-nav li.home {
	z-index: 100;
}
ul#main-nav li.portfolio {
	z-index: 99;
}
ul#main-nav li.services {
	z-index: 98;
}
ul#main-nav li.about {
	z-index: 97;
}
ul#main-nav li.contact {
	z-index: 96;
}

Even though we have assigned different z-index values to the tabs, they still don’t appear over lapped and will look like this:

To give the finishing touches to our navigation bar, we have to push each tab on top of the other. We have assigned the z-index values in descending order from left to the right. Hence, we will just push each tab starting from the right to about 20px to its left by adding a negative ‘margin-left’ property to the ‘ul#main-nav li’ and push the whole navigation bar unordered list to the left by adding a positive 20px ‘margin-left’ to nullify the left wards movement of the bar.

ul#main-nav {
	margin-left: 20px;
}
ul#main-nav li {
	float: left;
	position: relative;
	margin-left: -20px;
	display: inline;
}

Mission Accomplished

After assembling all the css and the xhtml together, we will have our overlapped tabbed main navigation menu ready for use. This was my take on how to create this kind of a menu and am sure there are many better ways to do the same. I would be glad if you could share any other way of doing this or just discuss some improvements to this procedure itself.
Here are some site which use over lapping tabs as their main navigation menu:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS, how to, menu, navigation, over lapped

34 Responses

FAQPAL
October 17, 2009 at 3:18 am

Excellent tutorial and well written. Thanks for the share.

Reply
- Sumeet Chawla
  October 17, 2009 at 10:01 am
  
  Thank You Pliggs.. It was an honour to post the tutorial at FaqPal too
Polprav
October 17, 2009 at 8:54 pm

Hello from Russia!
Can I quote a post in your blog with the link to you?

Reply
- Sumeet Chawla
  October 18, 2009 at 12:21 am
  
  Hey Hi From India! You want to quote a post from the blog as in? quote a particular sentence, phrase or what?
Rakesh
October 20, 2009 at 12:55 am

nice tutorial!….really helpful

Reply
knoli
October 25, 2009 at 5:45 pm

I want to make applications for the Apple Iphone and Ipod Touch. All kinds of applications but i dont know how to start and where to start from can somebody give me some help

Reply
knoli
November 21, 2009 at 3:49 am

I am interested in learning how to program for the iPhone. What would be the Windows language that most closely resembles the iPhone programming language. I would like to write for both Windows machines and iPhones without having to re-learn an entire programming language.

________________
[url=http://unlockiphone22.com/]unlock iphone[/url]

Reply
- Sumeet Chawla
  November 21, 2009 at 7:42 am
  
  well, if you get the hang of the language C then you can code in any programming language. C is like the mother of all programming languages.
Santosh Pingale
December 22, 2009 at 2:18 pm

Want 2 know which website, book OR other stuff I should use to design a website from Adobe Photoshop…… THank u in advance..plz mail me if u can..:D

Reply
- Sumeet Chawla
  December 23, 2009 at 11:28 am
  
  well, the best resource for learning designing is the internet. It gets updated every minute with the latest trends and tutorials.
  here are some links to get you started with
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  
  You should have the basics skills of using photoshop. In the end what actually matters is the level of creativity you have.
LeGars
January 14, 2010 at 3:07 pm

Hi, can I just say that although it’s an interesting menu, you shouldn’t have the current page tab as a link. It’s a UX and accessibility big no-no.

Reply
- Sumeet Chawla
  January 14, 2010 at 3:13 pm
  
  Hello,
  Which part are you referring to? I have the current page class on the list element and not the link element.
Dean
January 26, 2010 at 4:13 am

I can’t make it :s
Don’t know how

Can you please help me
He doesn’t even take my slices out png24’s

I’m not so good with css and I really want this overlapped menu
I only use 2 images and gave the the same name as you did
but doesn’t work
My image is a little bit lower but lil longer

Can you please help me out ?

Can you make it for me please ?

Reply
Dean
January 30, 2010 at 2:12 am

Ok, so Now I’m making the site in flash

But still problems with the navigation
how do i give it mouse over + active link in front?

Reply
- Sumeet Chawla
  February 8, 2010 at 10:39 am
  
  Hey hi, Sorry, I don’t have much experience with Flash. But if you follow the tutorial properly and mange the z-index values properly too. I don’t suppose you will have any problem…
Morishita
March 25, 2010 at 12:55 pm

Wonerful! I love how this blog is always updated with fresh content.I made three of my friends subscribe btw,lol

Reply
carl
June 3, 2010 at 5:44 pm

how do you download this

it’s an eternal loop

Reply
- Sumeet
  June 3, 2010 at 11:54 pm
  
  Sorry for the inconvenience caused. But you can download it after clicking on the download button. If you do not wish to subscribe, just close the pop up window and the download will start.
  
  Feedback is always welcomed
Tom Christian
June 12, 2010 at 5:47 am

Thanks very much. I was about to give up coding the navigation from the original design tutorial. This helped me a lot!

Reply
- Sumeet
  June 12, 2010 at 9:57 am
  
  Glad that I could be of help Tom