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.

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.

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:

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.

XHTML

1

2

3

4

5

6

7

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

CSS

1

2

3

4

5

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:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

ul#main-nav li a {

position:relative;

width:110px;

height:29px;

display:block;

background-image:url('../images/tabs.png');

background-position:centercenter;

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.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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.

CSS

1

2

3

4

5

6

7

8

9

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.atHiddenDepth.ieHotCards.com

About The Author

Sumeet Chawla is the founder of Code-pal. He works as a web developer, is a hardcore programmer, workaholic, fun guy and loves his family. Follow him on Twitter and Facebook.

Liked The Post?

Subscribe to our RSS Feed, Follow us on
Twitter, Like us on
Facebook or simply recommend us to friends and colleagues!

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.

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?

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)

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). ;,