Tutorials

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Written by Kevin Liew on 19 Mar 2009
669,187 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
Pete 9 years ago
If you make these changes to the CSS you will be able to resize dynamically with rounded corners in firefox, chrome, and opera -- ie will not round corners but works.

.box {
width:250px; << Adjust to any size
}

.boxTop {
height:11px;
clear:both;
background-color:#282828;
-moz-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}

.boxBottom {
height:11px;
background-color:#282828;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

.boxBody {
height: 268px; << add/adjust if you want to define a height (top tab icons are NOT included in this #)
background-color:#282828;
overflow:hidden; << keeps everything inside
}
Reply
Lunary 9 years ago
Hello,Mr Liew.I want to add this function to my wordpress blog.After many times,I failed.I want to know how can I use it in my sidebar.Thanks!!!
Reply
Kevin Liew Admin 9 years ago
I'm not quite sure about the implementation in WordPress as well. Basically, what you can do is, try to break the process into steps:

step1: find out the php script that generate the data, for example recent post, popular post and recent comment.
step2: make sure it generates the correct data
step3: format the result according to the html structure in this tutorial
step4: link all the js and css files, make sure the path is correct because you would most probably store the css and js files in the wp-content/themes folder.
step5: it should work!
Reply
Jimmy 9 years ago
Thank Kevin ^^
Reply
emma 9 years ago
hi there - great tutorial, thanks!! I have one question which you hopefully can assist me with. I am wanting to put different width images in for the tabs. What would I need to alter / add to the css to have say image 1. 100px and image 2. 170px.? Thanks again ....
Reply
Kevin Liew Admin 9 years ago
You need to add width and height for the following li:

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;}
Reply
Buck 9 years ago
Great Tab Menu... thanks. A quick question, how do I prevent the links from opening in the same window? I tried just using target="_blank" with the link but it opens a new window and in the same window. any help would be appreciated.
Reply
Kevin Liew Admin 9 years ago
Remove line 56 in javascript, this line:

window.location = $(this).find("a").attr("href");
Reply
Raghib suleman 9 years ago
a very famous tab thanks for sharing....
http://www.raghibsuleman.com/
Reply
Ben 9 years ago
hello,
nice menu!
but I wish that when you click again on the menu items that closes and no longer displays as icons.
Have you an idea?
Reply
reza 9 years ago
how i can install this for blogger??
thanks
Reply
Kevin Liew Admin 9 years ago
Sorry, but I have no ideas how to use blogger. I think you can if they allow you to put html, js and css.
Reply
Mores 9 years ago
Hello ;) Very, VERY nice ;)
I love your menu ;)

Can you please what i have to change, to close menu after the same icon is clicked twice in a row?

I have already deleted class="show" and part of class "selected" to avoid opening menu after page load, but i don't know how to close after usage.

Thanks in advanced for help ;)
Reply
Kevin Liew Admin 9 years ago
Hi Mores, I afraid you can't do that. This is a tab content, not accordion. So, at least one menu has to be displayed.
Reply
Mores 9 years ago
Heh, before I have read your answer i manage to succeed :)

1.Delete class="show"
2.Delete "selected" from clas="posts selected"
3.Ad this to css:
li.up {background-position:0 -32px;}
li.up:hover {background-position:0 0;}

4. Raplace script begginign with

//Get all the LI from the #tabMenu UL

$('.boxBottom').css("display","none");


$('#tabMenu > li').click(function(){

if ($(this).hasClass('up')) {

$('#tabMenu > li').removeClass('selected');

$('#tabMenu > li').removeClass('up');

$('.boxBottom').css("display","");

}

if ($(this).hasClass('selected')) {

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

$(this).addClass('up');

$('.boxBottom').css("display","none");

}


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').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

$('.boxBottom').css("display","");

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');


I have changed a design, so it looks nice with this configuration, couse standard theme would look a bit jammed.
Reply
Brian 8 years ago
I would change: //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

to

$('.boxBody').change(function() { $('#tabMenu > li').index($(this)).slideDown('1500') })

so that you can use divs within your list item.
Reply
Rahul 9 years ago
Hi Its an nice tab jquery
I want to fix the height of content on slide up an slide down
I dont want the box height to increase and decrease on clicking the respective menu I want the height to be same and fixed it should not increase or decrease
Plz give some sugesstion
Reply
Kevin Liew Admin 9 years ago
this demo using slideDown and SlideUp animation, you can change it to whatever jquery that currently have to meet your needs. http://api.jquery.com/category/effects/
Reply
Atif 9 years ago
Great stuff about jQuery Tabbed Interface thanks
Reply
renjith 9 years ago
I created a multiple instance of this , works fine, but there is a conflict with ie 8, please help to solve this
Reply
Kevin Liew Admin 9 years ago
ar, multiple instance... does one instance work in IE8?
Reply
misko 9 years ago
hi, can i use your free code for commercial purposes? I am building templates.
thanks and best regards.
Misko
Reply
Kevin Liew Admin 9 years ago
yes, go ahead and use it.
Reply
Cruz Baggio 9 years ago
Great stuff. thanks so much for posting this...
Reply