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

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

<script type="text/javascript" src="/js/jquery-1.3.1.min.js"></script>  
  <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');  
   
  //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 <img src="http://s51.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />  
  $('.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>