jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Written by Kevin Liew on 19 Mar 2009
719,740 Views • Tutorials

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
Phil Rennie 15 years ago
Very nice, and a lovely effect.

If I could make a suggestion.....
Within the $('#tabMenu > li').click(function(){ maybe it would be an idea to check first if the clicked element already has the 'selected' class and skip the rest of the function if so, this way it would avoid the bounce to nothing if the open tab is clicked again.
Reply
kevin Admin 15 years ago
Hi Phil, thank you. That's a good suggestion. I have amended it.
Reply
Simon 15 years ago
Thanks for this tutorial!
Reply
BoyKat 15 years ago
Hey the way the category has links to sites. In the split screen how can I make the links open only on the right side of the split screen so that the menu like list you have here stays on the left . please help me b/c i am useing this on my site now with a split screen and every time i click a link it moves the entire page when it would be alot better if it only changed the right side of the split.

Thanks
Reply
kevin Admin 15 years ago
@boykat: Are you using frame/iframe? How about an example? thanks!
Reply
kevin Admin 15 years ago
@Anthony: thank you for informing me the bug. This navigation is not perfect yet in term of cross platform compatibility. I don't have a window platform to test it. I can only able to do it on IE6@ my workplace.

Great to hear that you love it. I'm integrating it to this website as well. I think I will make a ajax version. Cheers
Reply
Anthony 15 years ago
Hi Kevin,

The arrow gifs are not rendering in compatibility view in IE8 (IE7). Plus I had to remove the tags from within the sample anchor links. Apart from that, this is a really cool menu to share with everyone. Thank you!

I'm building an ASP.NET 3.5 site and am using your amazing navigation menu. I will share the link when the project is complete :-)
Reply
BoyKat 15 years ago
Kevin,

Thanks for helping. What I have is a index.html splitting 2 pages.

<frame src="menu.php" name="menu" id="menu">
<frame src=main.php name="main" id="main">

My problem is and maybe I am overlooking something simple.. how can I make the menu open all the links up in the "main" as to keep the menu on the left side of the split index page?

Thanks,
BK
Reply
kevin Admin 15 years ago
@BoyKat: so it's frame :)

It's very simple, since you have named your frames:

<frame src="menu.php" name="menu" id="menu">
<frame src=main.php name="main" id="main">

In your Anchor link, you need to specify the target, yes, the frame you wish to display the content. In you case, your link should be:

<a href="http://www.queness.com " target="main">Queness</a>

All your page should be able to display in the main frame.

Cheers :)
Reply
kevin Admin 15 years ago
@BoyKat: good to hear that you've figure it out. Be sure you post your working example to show off.. :)
Reply
BoyKat 15 years ago
Kevin,

First off thanks again. I have been trying exactly what you siad and thought I was missing something... It seems that there is a problem with the animation of the link. When the mouse is over the link and the url link text moves outward it seems to want to open the link in the menu and the main page. Now if I take out the
in front of the line of code it works fine but without the wanted animation. Any ideas on how to keep the awesome animation?

BK
Reply
BoyKat 15 years ago
it seems this works:
a href="http://www.queness.com " target="main">Queness
but not this:
li>http://www.queness.com " target="main">Queness

and the li is needed for the nice animation
Reply
Paul McClean 15 years ago
Kevin, lovely effect... I may just have to reuse some of your code :) Thanks for sharing, Paul.
Reply