<div class="box">
 
  <ul id="tabMenu">
    <li class="posts selected"></li>
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>
 
  <div class="boxTop"></div>
 
  <div class="boxBody">
   
    <div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul>
    </div>
   
    <div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
   
    <div id="category">
      <ul>
        <li>Category 1</li>
        <li>Category 2</li>
        <li class="last">Category 3</li>
      </ul>
    </div>
   
    <div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>
      </ul>
    </div>
   
    <div id="random">
      <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>

<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 {
    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>

<script type="text/javascript">
 
$(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');
     
    //After cleared all the LI, reassign the class to the selected tab
    $(this).addClass('selected');
     
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
     
    //Look for the right DIV index based on the Navigation UL index
    $('.boxBody div: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','');
  });  
     
});
 
</script>