jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

a lot of bloggers are using tab based content as a way to save spaces in a webpage. I have seen a lot of blogger 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.

first let’s thanks queness.com for this beautiful widget with very nice icons and graphics!

1. Introduction

The 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:

* Thanks to WeFunction.com for the amazing icons

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.

class="box">  



 
"tabMenu">  

   
class="posts selected">
   

   
class="comments">
  

   
class="category">
  

   
class="famous">
  

   
class="random">
  

 
  



 
class="boxTop">
  



 
class="boxBody">  

     

   
"posts" class="show">  

     
  

       
Post 1
  

       
Post 2
  

       
class="last">Post 3
  

     
    

   
    

   

   
"comments">  

     
  

       
Comment 1
  

       
Comment 2
  

       
class="last">Comment 3
  

     
  

   
  

   

   
"category">  

     
  

       
Category 1
  

       
Category 2
  

       
class="last">Category 3
  

     
    

   
  

   

   
"famous">  

     
  

       
Famous post 1
  

       
Famous post 2
  

       
class="last">Famous post 3
  

     
    

   
  

   

   
"random">  

     
  

       
Random post 1
  

       
Random post 2
  

       
class="last">Random post 3
  

     
      

   
          



 
  



 
class="boxBottom">
  



   

3. CSS

You can always modify it to match your website.

4. Javascript

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 : ) now 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

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

note please : if you want support on how to install this widget for blogger ! than please comment bellow requesting the tutorial for the installation ! i will be happy to help you guys :)