Tutorials

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Written by Kevin Liew on 19 Mar 2009
669,193 Views • Shares
183 comments

Introduction

Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.

Before we start, if you are looking for a web hosting company, this is a good review - Hostgator Review.

My ideas:
  • Buttons on the top, content reside in different DIV elements,
  • Click on one of the buttons, it shows the relevant content;
  • Click on other buttons, it hides the existing and display the correct one.

The Design structure:

tab menu structure diagram

* Thanks to WeFunction.com for the amazing icons

Advertisement

2. HTML

In case the image above doesnt load, allow me to explain the design structure again. The UL#tabMenu is the buttons on the top a.k.a. Tabs. This is where you click, and it will trigger the jQuery to loads the content.

Inside the boxBody, you need to specify 5 DIVs, the number of DIV will depend on how many items you defined in #tabMenu, in this case, we have 5, therefre, you need 5 DIV elements defined in .boxBody.

The javascript loads the content based on the DIV's index in .boxBody. For example, if you clicked o the first button (the star or index 0), it will load the first DIV in the .boxBody (DIV index 0).

Therefore, arrangement of DIV in .boxBody must match with the arrangement of button in #tabMenu.

<div class="box">

  <ul id="tabMenu">
    <li class="posts selected"></li> <!-- default button-->
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>

  <div class="boxTop"></div>

  <div class="boxBody">
  	<!-- default page-->
    <div id="posts" class="show parent">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul>  
    </div>  
  
    <div id="comments" class="parent">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
  
 	<div id="category" class="parent">
   	  <ul>
   	    <li>Category 1</li>
   	    <li>Category 2</li>
		<li class="last">Category 3</li>
   	  </ul>  
   	</div>
  
  	<div id="famous" class="parent">
      <ul>
        <li>Famous post 1</li>
    	<li>Famous post 2</li>
    	<li class="last">Famous post 3</li>
	  </ul>  
    </div>
  
	<div id="random" class="parent">
	  <ul>
        <li>Random post 1</li>
	    <li>Random post 2</li>
    	<li class="last">Random post 3</li>
   	  </ul>    
	</div>        

  </div>

  <div class="boxBottom"></div>

</div>

3. CSS

You can always modify it to match your website. I will attach the psd file for this tutorial in the download and edit the css carefully. : ). Any suggestions please comment.

<style>

a {
	color:#ccc;
	text-decoration:none;
}

a:hover {
	color:#ccc;
	text-decoration:none
}

#tabMenu {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
}

#tabMenu li {
	float:left;
	height:32px;
	width:39px;
	cursor:pointer;
	cursor:hand
}

/* this is the button images */
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {
	width:227px
}

.boxTop {
	background:url(images/boxTop.gif)no-repeat;
	height:11px;
	clear:both
}

.boxBody {
	background-color:#282828;
}

.boxBottom {
	background:url(images/boxBottom.gif) no-repeat;
	height:11px;
}

.boxBody div.parent {
	display:none;
}

.boxBody div.show {
	display:block;
}


.boxBody #category a {
	display:block
}

/* styling for the content*/
.boxBody div ul {
	margin:0 10px 0 25px;
	padding:0;
	width:190px;
	list-style-image:url(images/arrow.gif)
}

.boxBody div li {
	border-bottom:1px dotted #8e8e8e; 
	padding:4px 0;
	cursor:hand;
	cursor:pointer
}

.boxBody div ul li.last {
	border-bottom:none
}

.boxBody div li span {
	font-size:8px;
	font-style:italic; 
	color:#888;
}

/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

</style>

 

4. Javascript

Alright, the fun part. It took me a while to read the jQuery documentation to make it works the way I want. And yes, I made it. As usual, I have put comments on each line. I put the animate effect on category page. I have a tutorial about it - Navigation List menu + Jquery Animate Effect Tutorial

$(document).ready(function() {	

  //Get all the LI from the #tabMenu UL
  $('#tabMenu li').click(function(){
    
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {    
           
	    //remove the selected class from all LI    
	    $('#tabMenu li').removeClass('selected');
	    
	    //Reassign the LI
	    $(this).addClass('selected');
	    
	    //Hide all the DIV in .boxBody
	    $('.boxBody div.parent').slideUp('1500');
	    
	    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
	    $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
	    
	 }
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, 
    //if you have better ideas to toggle it, please comment    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() { 
    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });

  
  //Mouseover with animate Effect for Category menu list  :)
  $('.boxBody #category li').mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
    
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  
	
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('.boxBody li').click(function(){
    window.location = $(this).find("a").attr("href");
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });  	
	
});

5. Finally

You will get a beautiful jQuery Tabbed Side Menu!

However, in category page, if you were using IE, the LI can't be hightlighted when mouse hover it in (that's why we all hate IE). If you know what's the problem, please advise : )

Last but not least, check out the demo or download the source code to play with it. Any questions. please leave your comment :)

Support me by bookmark this article and share it to your friends : ) Thanks

Update

15-9-2011: Fixed DIV issue.

14-4-2009: Remove click event in the LI, change the display attribute in #category to block.

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

183 comments
IamStalker 8 years ago
Hi, i want to hold the selected tab through postback (i'm using asp.net) with your glorious tabs, how to selected certain tab on postback?
Reply
Kevin Liew Admin 8 years ago
Not sure how it should work in asp.net... would you able to select the tab by their id?
Reply
Evangelos Aktoudianakis 8 years ago
ASP .NET formulates its own IDs upon page creation, so as to properly hook up events server-side. A way to do this, Iam, would be to exclude the tab from the main form; Another way (more complicated) would be to write a filter to replace the JS file names for the tabs, with the ones .NET generates but that's too resource expensive. Try to keep the tabs outside the form, for full control; on the other hand, if you use postback , you use the animation magic...I'd suggest you take a look at Jquery ajax control, and load what you need dynamicaly without involving .NET code with it. All the best.
Reply
Bela 8 years ago
Looks awesome, but the download doesn't work. I get an empty zip folder.
Reply
Kevin Liew Admin 8 years ago
You're the very first person that say that. :) I have checked it, it's there. Nothing is wrong here.
Reply
Bela 8 years ago
Thank you for replying. I figured it out, I was just being noob
Reply
umesh 8 years ago
Hi Frank Jansen I am struggling with one thing though:i want to insert another div in Posts, Comments, Famous Posts and Random Posts menu list. how can i used anothe div
Reply
Kevin Liew Admin 8 years ago
I made a mistake while preparing this tutorial few years ago.

This line:
$('.boxBody div').slideUp('1500'); causing the div issue. It hides all div, but what we want to hide is the top level div only (#post, #comment, .......)

What you need to do now, give all the top div in .boxBody a common class. eg class="parent", then modify this to:

$('.boxBody div.parent').slideUp('1500');

that should solve your div issue.
Reply
vinod 8 years ago
Super one what im looking for can you please also help me on the driection it appears should be reverse action, like now it is bottom to top direction when moving to next tab left to right. the action i want is as it is in right to left tabs . Please suggest to make change in code.
thanks
Reply
Kevin Liew Admin 8 years ago
Line 18 and 21, try to swap the slideDown and slideUp. I guess that will meet your requirement.
Reply
skeith 8 years ago
can I put php script on each tab content?
Reply
Kevin Liew Admin 8 years ago
Yes. That's how it supposed to be used. Populate dynamic data on each tab content, then present it with in javascript tab layout.
Reply
Lexys 8 years ago
Hi Kevin, in an earlier comment, you recognised a problem with the nested div not showing. My problem is that I am placing an api feed which contains divs to replace the content, and therefore I am unable to modify those divs or add classes to them. Do you have any suggestions?

Oh and I'm not very versed in javascript but this tutorial was very, very helpful! :) Thanks for sharing
Reply
Kevin Liew Admin 8 years ago
Hey Lexys, I fixed the DIV issue in this tutorial. Please download the latest and play with it to see if you still facing the same issue.
Reply
Typhoon 8 years ago
Thank you so much Kevin, your job is excellent.
Reply
Thierry 8 years ago
Nice job !
I need to use more tabs with the same box size. How can i do to scroll tabs like browsers ?

Thanks in advanced for help
Reply
Jong 8 years ago
Nice! Just what I needed. Thank you for all your hard work. :)
Reply
mathiouchio 8 years ago
wixxxed
Reply
Jared 8 years ago
I'm not sure why but when I add a wordpress loop inside of the <ul> tags...nothing shows up.
Reply
Kevin Liew Admin 8 years ago
Can you view the source code and check if WP did populate relevant data into the UL?
Reply
Dennis Edwards 8 years ago
I want a list item to hyperlink to a 'target_blank' page and whilst it does open in the new window, the original window also hyperlinks as well. How can I prevent this.
Reply
Vabee 8 years ago
Hi, this is very nice example of tab menu, but i need a link in every tab which opens another content into same tab. is it possible to do this? plz reply me asap
Reply