Home Tutorials How to create overlapping tabs

How to create overlapping tabs

Author

Date

Category

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

overlapping_tabs

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:

  • a Verdana font or typeface
  • a bold 12 pixel font size
  • non-underlined links
  • two tab layers: blue and white

What I’m saying to myself:

  • Alright, I hate coding horizontal menus (just kidding).
  • I have to code the blue layer first.
  • Menu link color is white.
  • I have to code the white layer second.
  • Menu link color for white layer is black.
  • White layer indicate whether a tab is current.
  • A current tab indicate which page the user is looking at.
  • Forget the user! The user suck! Rock on animated GIFs! (just kidding…again)

Before Coding

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

navtab

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

navtab_first

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

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

navtab_current

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

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

navtab_current_first

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

navtab_current_last

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:

navtab_current_leftnavtab_current

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:

overlapping_tabs_stretched

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?

  • I started a DIV tag with a class named, firstmenu.
  • Under the DIV, I started an un-ordered list (UL) tag.
  • Under that UL, I started four sets of list-item (LI) tags. Each of those four is a tab.
  • Within each tab is the opening <a> and closing </a> link (A) tags.
  • Between each set of link tags is a link title. For examples: Home, About, Advertise, Contact.
  • After the list-items or tabs, I closed the un-ordered list with
    </ul>

    .

  • After closing the un-ordered list, I closed the firstmenu DIV with
    </div>

    .

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

  • The normal overlapping tabs don’t actually overlap until you highlight your menu with a current tab. The overlapping look is an illusion.
  • Unlike the Sliding Doors of CSS, overlapping tabs has to be hard-coded to allow room for unique classes and IDs like firstlastfirstcurrent, and lastcurrent. Unless, you really know PHP and are able to modify the wp_list_pages() function to integrate overlapping tabs with wp_list_pages().
  • Overlapping tabs are difficult and time-consuming to implement, but the effect is well worth it.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

  And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad. I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments