Codepal

We develop enthralling web experiences.

How to Code an Overlapping Tabbed Main Menu

How to Code an Overlapping Tabbed Main Menu

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 Downloadhttp://www.code-pal.com/wp-content/plugins/download-monitor/download.php?id=5

It would be awesome if you could like us on Facebook or subscribe to our feed...

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.

menu-image

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

tab-sprite

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.

no-shadow-sprite

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:

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.

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:

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.

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

non-overlapped-tabs

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.

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


Discussion 76 Responses

Excellent tutorial and well written. Thanks for the share.

Thank You Pliggs.. It was an honour to post the tutorial at FaqPal too :)

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

Hey Hi From India! :) You want to quote a post from the blog as in? quote a particular sentence, phrase or what? :)

nice tutorial!….really helpful

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

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]

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.

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

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. :)

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.

Hello,
Which part are you referring to? I have the current page class on the list element and not the link element.

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 ?

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?

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… :)

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

how do you download this

it’s an eternal loop

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 :)

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

Glad that I could be of help Tom :)

The example works well and is really superb looking.
However, it doesn’t work as well on IE6 as the ping file (.png)
support is not there. Does anyone have a workaround for IE6 that
works with this example?

Great, i really like this kind of menu, i added to my web site
http://www.ajaxshake.com
thanks

Heya. Awesome tutorial. I’ve just created a blog. Still in designing state. I really want to use this thing.
But I’m kinda addicted to multilevel drop-down menus. Is it possible to modify this codes? So that a multilevel dropdown menu can be achieved?
Thanx and regards.

Yup, you can easily modify it to add multi level menus. Look for any multi level menu tutorial out there. Basically, the li element will have a ul element along with the hyperlink. The ul element will act as the sub menu (drop down menu)

Just wanted to give you a shout from the valley of the sun, great information. Much appreciated.

I just came across this from Smashing Magazine. Thanks for this great tutorial.

what do you think is the maximum number of menu tabs that i can put across the top of my website – i would really like to have 13 – is that to many?

Suppppppppppper tutorial….Thanks a lot…………

Awesome tutorial.. I wanted to make use of it in my project.. But cannot download the code.. Could you please mail me ?? Thanks in advance..

Why are you unable to download? Hmm just close the box which pops up after you click on download. Download should start :)

Nice article. Hey, can you make a tutorial like your navigation menu.?

Hey sure.. will add it to my to-do list and write one soon :)

Your mode of explaining the whole thing in this post is really pleasant, every one
be capable of without difficulty understand it,
Thanks a lot.

hiii,
Mr. Sumit Chawla
Can yOu tell mE abOut coding of Goto Top Menu bar coding in youR wEbsite..
plEase…

@Sachin: You can use any of these plugins to create the scroll to top effect. http://www.jquery4u.com/plugins/jquery-scroll-top-plugins/

Hi Sumeet.

The actual focus of the blue tabs has been lost and in your download there is no main nav css files. I know you have the code on your website but which folder would it actually go in

thanks

Hey Alan, I just downloaded the files myself. Everything seems to be fine and it’s working as it was suppose to. What seems to be the problem?

I don’t understand why in the tabs, “Popolari” is on top of “Recenti” in this PAGE

HERE source CSS

Someone can help me?
Thanks!

Hey Lorenzo,

It is because the active tab has a lower z-index value. What you can do is, add an active class to the active tab. Then for the active class. Add z-index as 1000.

the css which you can add should be something like this:

:)

Perfect! Great job!
Thank you so much :)

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ;,

Can you explain more for adapting this into a WordPress site?

The wordpress thing is also the same. You just need to add the respective classes and ids :)

I was looking for a simple guide to create this effect from slices. Its just so simple, effective, and makes adding new pages and tabs easy. Thanks!!!!

Very nice, any insight on doing a responsive overlapping tabbed menu?

Hmm, this has been a very old solution. As overlapping tabbed menu is one of the most popular post, I will try to write a new modern version of it with responsive bit and without using any images :)

why i cant able to download????

Hey, you can easily download by clicking on download, then either subscribing to mail or liking us on facebook (optional) and then closing the box :)

Great solution! but I have a problem, how do you get rid off the checkered background of the canvas on the tab image?

It’s not actually chequered. Photoshop treats that as transparent.

Useful and superb tutorial. I like it very much. :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>