Submit your widget

jQuery Moving Tab and Sliding Content

Created 10 years ago   Views 16534   downloads 2866    Author kevin
jQuery Moving Tab and Sliding Content
View DemoDownload 20.7 KB
146
Share |

how to create a moving tab slide content in this tutorial. Basically, the tab section simulate Lava Lamp Effect, and the content is using animate method to slide it.

 

1. HTML

In the container #moving_tab, we have two sections in the HTML code - tabs class and content class. Tabs class contains 2 tabs, and content class contains 2 ul lists.

<div id="moving_tab">
 <div class="tabs">
  <div class="lava"></div>
  <span class="item">Tab 01</span>
  <span class="item">Tab 02</span>

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

 </div> 
</div>

 

2. CSS

I have put comment in every important css style. Bear in mind that, if you change the width of #moving_tab, you might have to change the width value in .item, .lava, .panel, ul.

 body {
  font-family:arial;
  font-size:12px; 
 }
 
 a {
  color:#333;
  text-decoration:none;
  display:block;
 }

 a:hover {
  color:#888;
  text-decoration:none;
 }
 
 #moving_tab {
  /* hide overlength child elements*/
  overflow:hidden;
  
  /* all the child elements are refering to this width */
  width:300px;

  /* fix ie 6 overflow bug */
  position:relative
  
  /* styling */
  border:1px solid #ccc; 
  margin:0 auto;
 }
 
  #moving_tab .tabs {
   /* enable absolute position for .lava */
   position:relative; 
   height:30px;
   
   /* styling */
   padding-top:5px;
   cursor:default;
  }
 
  #moving_tab .tabs .item {
   /* enable z-index */
   position:relative;
   z-index:10;
  
   /* display in one row */
   float:left;
   display:block;

   /* width = half size of #moving_tab */
   width:150px;
   
   /* height = height of .tabs */
   text-align:center;
   font-size:14px;
   font-weight:700; 
  }

  #moving_tab .tabs .lava {
   /* Set it to absolute */
   position:absolute;
   top:0; left:0;
   
   /* display the lava in bottom most layer */
   z-index:0;  
    
   /* width = half size of #moving_tab */
   width:150px;

   /* height = height of .tabs */
   height:30px;
   
   /* styling */
   background:#abe3eb;

  }
  
  #moving_tab .content {
   /* enable absolute position for .panel */ 
   position:relative;
   overflow:hidden;
   
   /* styling */
   background:#abe3eb;
   border-top:1px solid #d9fafa;
  }
  
  #moving_tab .panel {
   /* width is width of #moving_tab times 2 */
   position:relative;
   width:600px;
  }
  
  #moving_tab .panel ul {
   /* display in one row */
   float:left;
   
   /* width is the same with #moving_tab */
   width:300px;
   
   /* remove all styles */
   padding:0;
   margin:0;
   list-style:none;
   

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

 

3. Javascript

I learnt new trick in jQuery scripting - position() method. I have been using offset() method to calculate the position of elements, it's really hassle because the position:relative of elements can influence the value of offset.

This is the code I used to use:

  • $('#moving_tab').offset().left - $(this).offset().left + $(this).width()

and it can be replaced by:

  • $(this).position()['left']

Don't know why I couldn't find this method. But hey! it's something new and I'm excited. Anyway, the jQuery script is quite simple, we only have to animate lava class and panel.

 
$(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});
 });
  
});