jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial


jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

183 comments

Buck
Fri, 25th March 2011
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
Mon, 28th March 2011
Remove line 56 in javascript, this line:

window.location = $(this).find("a").attr("href"); Reply
Raghib suleman
Tue, 29th March 2011
a very famous tab thanks for sharing....
http://www.raghibsuleman.com/ Reply
Ben
Thu, 31st March 2011
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
Tue, 5th April 2011
how i can install this for blogger??
thanks Reply
Kevin Liew Admin
Wed, 6th April 2011
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
Wed, 6th April 2011
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
Wed, 6th April 2011
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
Thu, 7th April 2011
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
Wed, 26th October 2011
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
Thu, 28th April 2011
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
Tue, 3rd May 2011
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
Fri, 29th April 2011
Great stuff about jQuery Tabbed Interface thanks Reply
renjith
Mon, 2nd May 2011
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
Tue, 3rd May 2011
ar, multiple instance... does one instance work in IE8? Reply
misko
Wed, 4th May 2011
hi, can i use your free code for commercial purposes? I am building templates.
thanks and best regards.
Misko Reply
Kevin Liew Admin
Mon, 9th May 2011
yes, go ahead and use it. Reply
Cruz Baggio
Thu, 19th May 2011
Great stuff. thanks so much for posting this... Reply
IamStalker
Mon, 23rd May 2011
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
Sun, 29th May 2011
Not sure how it should work in asp.net... would you able to select the tab by their id? Reply
Evangelos Aktoudianakis
Sat, 14th April 2012
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
Fri, 17th June 2011
Looks awesome, but the download doesn't work. I get an empty zip folder. Reply
Kevin Liew Admin
Wed, 22nd June 2011
You're the very first person that say that. :) I have checked it, it's there. Nothing is wrong here. Reply
Bela
Tue, 12th July 2011
Thank you for replying. I figured it out, I was just being noob Reply
umesh
Tue, 28th June 2011
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
Wed, 24th August 2011
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
Mon, 1st August 2011
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
Mon, 1st August 2011
Line 18 and 21, try to swap the slideDown and slideUp. I guess that will meet your requirement. Reply
skeith
Wed, 17th August 2011
can I put php script on each tab content? Reply
Kevin Liew Admin
Wed, 24th August 2011
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
Mon, 12th September 2011
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
Wed, 14th September 2011
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
Mon, 10th October 2011
Thank you so much Kevin, your job is excellent. Reply
Thierry
Mon, 31st October 2011
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
Tue, 29th November 2011
Nice! Just what I needed. Thank you for all your hard work. :) Reply
mathiouchio
Mon, 5th December 2011
wixxxed Reply
Jared
Mon, 12th December 2011
I'm not sure why but when I add a wordpress loop inside of the <ul> tags...nothing shows up. Reply
Kevin Liew Admin
Tue, 20th December 2011
Can you view the source code and check if WP did populate relevant data into the UL? Reply
Dennis Edwards
Sat, 3rd March 2012
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
Thu, 15th March 2012
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
Ondrej
Fri, 20th April 2012
Hello Kevin, thank you for this nice tab menu - It works great! I have only one problem, that I'm not able to solve - I would like to put a link on tab 1 that opens for example tab 4. How can this be done please? I would be very grateful if you could help. Thank you. Reply
Martin
Sat, 28th April 2012
Thx a lot, just what I need ! Reply
tojihi.com
Fri, 8th June 2012
Its an nice jquery and thanks so much for posting this... Reply
Abdul Salam Afridi
Sun, 17th June 2012
Great work nice thanks for posting... Reply
Hasselaar
Thu, 21st June 2012
Nice job! I'm going to play wit it :-)

One question, is it possible to use variables in the url? I'm trying but still with no succes...

Greetings, Hasselaar. Reply
Kim Wilson
Fri, 13th July 2012
1. I'm having trouble changing the color of list items that are not associated with links (no a href)
2. I changed the pictures to text (for my menu title names), and I want the menu to move to the right when mouseover is on that particular menu text. Reply
Ruby
Wed, 12th September 2012
Hello! LOVE this tutorial, it was exactly what I was looking for. I'm making a pest library for a pest control company, and this really helped to organize the content. Thank you so much for posting!!

One question though, when I applied to code to my site, the first tab doesn't appear to be selected on loading like it does on your demo. Here's what I mean: http://trademarkps.com/test/learning-center/pest-library/stinging-pests/

The first tab which is Bee, should have the gray tab around it, but it only appears if you click on it. Did I do something wrong or miss something? Your help is greatly appreciated! Reply
Patrick Dijkkamp
Thu, 4th October 2012
You missed something, adding 'selected' to the li-class.
Like this: <li class="bee selected"></li> Reply
Paul
Sun, 7th October 2012
You need to ensure the tab you want to be the selected tab on page load has the class 'selected' on it, in this case your Bee LI in the tab menu. <li class="bee selected"></li> Reply
Ivajlo
Sat, 27th October 2012
I'd like to use this code and to make some changes. I don't like to use <ul> and <li> tags in boxBody. I want to use only TAB part pf code. I'm wondering why only <a> tags disapear in browser window?! Any idea? Reply
Kundan
Wed, 20th February 2013
Nice information. thanks for sharing. Reply
Momo
Mon, 11th March 2013
This is very nice thank you for your hard work, there are links on these tabs that point to undefined links. Example: "Create a Simple CSS + Javascript Tooltip with jQuery." - Hover and click tries to go to a non existing page. I would like to find that attribute and remove the cursor and dead link effect if possible. Cant seem to figure it out ... Reply
Kevin Liew Admin
Mon, 25th March 2013
Hi Momo, sorry, this tutorial is really old.. you can fix it by changing this at line 52.


$('.boxBody li').click(function(){
if ($(this).find('a')) window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
Reply
Saman Chalian
Thu, 12th December 2013
Thank you so much Kevin, for posting this useful tutorial.
I have a questin. I use this menu in my web application which has written with asp.net and c# in visual studio. I use your menu to navigate through my project .aspx web pages, but I would like to highligh mune items base on realated web pages. How can i do that? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement