jQuery Moving Tab and Sliding Content Tutorial | Queness

温柔一哮 2012-11-27

展开全文

jQuery Moving Tab and Sliding Content Tutorial

Introduction

We learn 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. I have two tutorials that focus on that two effects. Click on the following links if you're interested:

Lava Lamp Menu Tutorial

Sliding Tab Menu for Sidebar Tutorial

Right, like usual, I always like to separate the code into 3 sections - HTML, CSS and Javascript. For best practise, it's good to separate css, javascript from html code.

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.

The following image illustrate the structure of this tutorial:

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

The rest of it like position:absolute and position:relative are important as well to set the layout, for the animation and layering. For more tips and tricks for CSS, check out the following posts

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

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!