Site icon WPDesigner

How to create overlapping tabs

Jazib Zaman

First, design the tabs; I used Photoshop 7.0. Before any slicing, saving, or coding, here’s my tab design:

In the example above, no matter what the lengths of the links are, they all sit within tabs that have the same width. That’s because I plan on coding stretchable tabs. Once my tabs are coded, they’ll adjust themselves to the right widths.

What can you expect from looking at the design alone?
As a coder, I see:

What I’m saying to myself:

Before Coding

I need to split the design up and save the images first. Here are my images:

I named it navtab.gif (navigation tab). This image is the backbone of my tabs, the middle.

navtab_first.gif – Notice the beginning of the overlapping tabs, the left side of the first tab is different from the rest. This image is it.

navtab_last.gif – The background image for the last tab.

navtab_current.gif – We’re starting the cycle all over again. This time, it’s for the white layer. This image is much shorter than the navtab.gif image because once you get to the white area, there’s no detail to worry about. You can perpetuate the white space by using a white background color. For navtab.gif, there is detail so you can’t simply use a background color. If you didn’t need to worry about details for navtab.gif, then generally speaking, it would have a never ending width, which means your links could be as lengthy as you like them to be.

navtab_current_left.gif – This is the normal left side of a current tab.

navtab_current_first.gif – The left side of a current tab in the first position.

navtab_current_last.gif – Just like navtab_current.gif, but it’s for the very last tab.

All together, there are seven small images to piece together. Let’s piece the navtab_current_left.gif and navtab_current.gif images together. We get:

Coding

Before we code it, here’s what the whole menu and each tab actually look like if you stretch it to clearly see what each tab is consist of:

As you can see above, the first and last tabs are different.

Here are the codes I used for the overlapping tabs on WPDesigner: (It will not work if you copy and paste the codes.)

<div class=”firstmenu”>

<ul>
<li class=”first” <?php if (is_home()) { echo “id=”firstcurrent”"; } ?>>
<a href=”<?php bloginfo(’url’) ?>”>Home</a>
</li>

<li <?php if (is_page(’2′)) { echo “id=”current”"; } ?>>
<a href=”<?php echo get_permalink(’2′); ?>”>About</a>
</li>

<li <?php if (is_page(’advertise’)) { echo “id=”current”"; } ?>>
<a href=”<?php bloginfo(’url’); ?>/advertise/”>Advertise</a>
</li>

<li class=”last” <?php if (is_page(’feedback’)) { echo ” id=”lastcurrent”"; } ?>>
<a href=”<?php bloginfo(’url’); ?>/feedback/”>Contact</a>
</li>
</ul>

</div>

What just happened?

To allow the first and last tabs to be different and look different, I added

class=”first”

to the first set of list-item (LI) tags and

class=”last”

to the last set of list-item tags.

To style for the white layer or current tabs, I told each tab to add

id=”current”

to its opening list-item (LI) tag. For example, if you were at the About page. The About tab list-item (LI) tag would change from

<li>

to

<li id=”current”>

.

To allow the first and last tabs to be different and appear as current tabs at the same time. I told the first tab to add

id=”firstcurrent”

to its list-item if the user was at the home page. I told the last tab to add

id=”lastcurrent”

to its list-item if the user was at the Contact or feedback page.

Below are some more examples of what all the PHP conditions do for the tabs:

Basic:

<ul>
<li class=”first”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the home page:

<ul>
<li class=”first” id=”firstcurrent”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the About page:

<ul>
<li class=”first”>Home</li>
<li id=”current”>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the Contact page:

<ul>
<li class=”first”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last” id=”lastcurrent”>Contact</li>
</ul>

Styling

Styling overlapping tabs vary from blog to blog. The following CSS codes are the styles I used for WPDesigner. They’re listed in a step-by-step order so they’re self-explanatory. If you’re confused about any of them. Use W3schools as your CSS guide.

.firstmenu{
float: left;
width: 970px;
background: url(images/bg_firstmenu.jpg) no-repeat;
}

.firstmenu ul{
list-style-type: none;
margin: 0;
padding: 20px 20px 0 20px;
}

.firstmenu ul li{
float: left;
margin: 0 20px 0 0;
background: url(images/navtab.gif) no-repeat right top;
}

.firstmenu ul li a{
display: block;
padding: 8px 48px 8px 10px;
font-weight: bold;
text-decoration: none;
color: #fff;
}

.firstmenu ul li a:hover{
text-decoration: underline;
}

.firstmenu ul li.first a{
padding: 8px 48px 8px 39px;
background: url(images/navtab_first.gif) no-repeat;
}

.firstmenu ul li.last{
background: url(images/navtab_last.gif) no-repeat right top;
}

.firstmenu ul li.last a{
padding: 8px 39px 8px 10px;
}

.firstmenu ul li#firstcurrent{
background: #fff url(images/navtab_current.gif) no-repeat right top;
}

.firstmenu ul li#firstcurrent a{
background: url(images/navtab_current_first.gif) no-repeat;
color: #000;
}

.firstmenu ul li#current{
margin-left: -38px;
background: #fff url(images/navtab_current.gif) no-repeat right top;
}

.firstmenu ul li#current a{
padding: 8px 48px;
background: url(images/navtab_current_left.gif) no-repeat;
color: #000;
}

.firstmenu ul li#lastcurrent{
margin-left: -38px;
background: #fff url(images/navtab_current_last.gif) no-repeat right top;
}

.firstmenu ul li#lastcurrent a{
padding: 8px 39px 8px 48px;
background: url(images/navtab_current_left.gif) no-repeat;
color: #000;
}

Conclusion

Are you going to use overlapping tabs anytime soon? Don’t tell me I spent three hours on this tutorial for nothing.

Exit mobile version