jQuery Moving Tab and Sliding Content

css

#moving_tab a { color:#333; text-decoration:none; display:block; }

#moving_tab a:hover { color:#888; text-decoration:none; }

#moving_tab { overflow:hidden; width:300px;


/* fix ie 6 overflow bug */
position:relative; border:1px solid #ccc; margin:0;}
 
#moving_tab .tabs { position:relative;height:30px; padding-top:5px; cursor:default; }

#moving_tab .tabs .item { position:relative; z-index:10; float:left; display:block; width:150px; text-align:center; font-weight:700; }
 
#moving_tab .tabs .lava { position:absolute; top:0; left:0; z-index:0; width:150px;height:30px; background:#abe3eb; }

#moving_tab .content { position:relative; overflow:hidden; background:#abe3eb; border-top:1px solid #d9fafa; }  

#moving_tab .panel { position:relative; width:600px; }  

#moving_tab .panel ul { float:left; width:300px; padding:0; margin:0; list-style:none; } 

#moving_tab .panel ul li { padding:5px 0 5px 10px; border-bottom:1px dotted #fff;}

HTML

<div align="left" id="moving_tab">
  <div class="tabs">
  <div class="lava"></div>
  <span class="item">Popular Posts</span>
  <span class="item">Recent Posts</span>
  </div>

  <div class="content"> 
  <div class="panel"> 
  <ul>
  <li><a href='#'>Popular Posts Content 01</a></li>
  <li><a href='#'>Popular Posts Content 02</a></li>
  <li><a href='#'>Popular Posts Content 03</a></li>
  <li><a href='#'>Popular Posts Content 04</a></li>
  <li><a href='#'>Popular Posts Content 05</a></li>
  </ul>

  <ul>
  <li><a href='#'>Recent Posts Content 01</a></li>
  <li><a href='#'>Recent Posts Content 02</a></li>
  <li><a href='#'>Recent Posts Content 03</a></li>
  <li><a href='#'>Recent Posts Content 04</a></li>
  <li><a href='#'>Recent Posts Content 05</a></li> 
  </ul> 
  </div>
  </div> 

  </div>

jQuery Usage

$(document).ready(function () {
  //set the default location (fix ie 6 issue)
  $('.lava').css({left:$('span.item:first').position()['left']});
  $('.item').mouseover(function () {
   //scroll the lava to current item position
   $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
   //scroll the panel to the correct content
   $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
  });
  
 });

jquery-1.3.1.min.js

Click Here to DOWNLOAD

Example

Click to DEMO