Animated Tabs Content Using jQuery and CSS

Introduction

This article will show you how to create your own tabbed content step by step. Tabs are used to improve the utilization of space and to provide some stylish effects in a website. jQuery tabs are very popular and create some fancy look for web pages.

Description

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick but the events can be changed to onHover through an option. For my new looks I created a container which has the ability to switch content through tabs, but with an animation.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.

img1.gif
 

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.
     

img2.gif

img3.gif
 

Step 3 :  In this step we are adding one image to the "Image" folder of the project.

img4.gif
 

Step 4 : In this step add the tabbedContent.css file to your Styles folder.

img5.gif
 

Right-click on the sagscroller.css file->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" type="text/css" href="Styles/tabbedContent.css" />

Step 5: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section.

<style type="text/css">
        .tabbed_content
        {
            background-color#663366;
            width620px;
        }
        .tabs
        {
            height62px;
            positionrelative;
        }        
        .tabs .moving_bg
        {
            background-color#FF9933;
            background-imageurl(../images/arrow_down_green.gif);
            background-positionbottom left;
            background-repeatno-repeat;
            left0;
            padding15px;
            padding-bottom29px;
            positionabsolute;
            width125px;
            z-index190;
        }
        .tabs .tab_item
        {
            displayblock;
            floatleft;
            padding15px;
            width125px;
            color#ffffff;
            text-aligncenter;
            z-index200;
            positionrelative;
            cursorpointer;
        }
        .tabbed_content .slide_content
        {
            overflowhidden;
            background-color#9999CC;
            padding20px 0 20px 20px;
            positionrelative;
            width600px;
            top0px;
            left-1px;
        }
        .tabslider
        {
            width5000px;
        }
        .tabslider ul
        {
            floatleft;
            width579px;
            padding0px;
            margin-right40px;
            margin-left0px;
            margin-top0px;
            margin-bottom0px;
        }
        .tabslider ul a
        {
            color#330000;
            text-decorationnone;
        }
        .tabslider ul a:hover
        {
            color#CC9933;
        }
        .tabslider ul li
        {
            padding-bottom7px;
        }
</
style
>

Step 6: In this step we write the script reference to the aspx page; let us see from where you have to write the script code.

img6.gif
 

Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 7.

Step 7: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.js"></script>

Step 8: In this step you will see the body code of the Default2.aspx page which is given below.

<body>
    <form id="form1" runat="server">
    <div class='tabbed_content'>
        <div class='tabs'>
            <div class='moving_bg'>
                &nbsp;
            </div>
            <span class='tab_item'>C# corner </span><span class='tab_item'>Latest Articles </span>
            <span class='tab_item'>Latest Blogs </span><span class='tab_item'>Latest News </span>
        </div>
        <div class='slide_content'>
            <div class='tabslider'>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com'>Home </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Resources/AboutUs.aspx'>About Us </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Authors/'>Authors </a></li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/UploadFile/sapnabeniwal/animated-tab-menu-using-jquery/'>
                        Animated Tab Menu Using jQuery </a></li>
                    <li><a href='http://www.c-sharpcorner.com/UploadFile/6cde20/concept-of-view-in-sql-server/'>
                        Concept of View in SQL Server</a></li>
                    <li><a href='http://www.gayadesign.com/general/new-looks-coming-your-way/%27%3EImplodeImplode()
                        and Explode() Function in PHP </a></li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8506/export-windows-live-mail-to-outlook.aspx'>
                        Export Windows Live Mail to Outlook </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8274/insert-data-in-grid-view-without-using-database.aspx'>
                        Insert data in Grid View without using database </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8521/html-table.aspx'>HTML TABLE </a>
                    </li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/News/1379/discountAsp-Net-joins-microsoft-visual-studio-industry-progr.aspx'>
                        DiscountASP.NET Joins Microsoft Visual Studio Industry Program</a></li>
                    <li><a href='http://www.c-sharpcorner.com/News/1368/microsoft-dynamic-nav-web-client.aspx'>
                        Microsoft Dynamic NAV Web Client </a></li>
                    <li><a href='http://www.c-sharpcorner.com/News/1370/microsoft-released-windows-8-consumer-preview.aspx'>
                        Microsoft Released Windows 8 Consumer Preview</a></li>
                </ul>
            </div>
        </div>
    </div>
    </form
>
</body>

Step 9: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>
 Animated Tab Using jQuery and CSS </title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/tabbedContent.js"></script>
    <link rel="stylesheet" type="text/css" href="Styles/tabbedContent.css" 
/>
<style type="text/css">
        .tabbed_content
        {
            background-color#663366;
            width620px;
        }
        .tabs
        {
            height62px;
            positionrelative;
        }        
        .tabs .moving_bg
        {
            background-color#FF9933;
            background-imageurl(../images/arrow_down_green.gif);
            background-positionbottom left;
            background-repeatno-repeat;
            left0;
            padding15px;
            padding-bottom29px;
            positionabsolute;
            width125px;
            z-index190;
        }
        .tabs .tab_item
        {
            displayblock;
            floatleft;
            padding15px;
            width125px;
            color#ffffff;
            text-aligncenter;
            z-index200;
            positionrelative;
            cursorpointer;
        }
        .tabbed_content .slide_content
        {
            overflowhidden;
            background-color#9999CC;
            padding20px 0 20px 20px;
            positionrelative;
            width600px;
            top0px;
            left-1px;
        }
        .tabslider
        {
            width5000px;
        }
        .tabslider ul
        {
            floatleft;
            width579px;
            padding0px;
            margin-right40px;
            margin-left0px;
            margin-top0px;
            margin-bottom0px;
        }
        .tabslider ul a
        {
            color#330000;
            text-decorationnone;
        }
        .tabslider ul a:hover
        {
            color#CC9933;
        }
        .tabslider ul li
        {
            padding-bottom7px;
        }
</
style
>
</head>
<
body>
    <form id="form1" runat="server">
    <div class='tabbed_content'>
        <div class='tabs'>
            <div class='moving_bg'>
                &nbsp;
            </div>
            <span class='tab_item'>C# corner </span><span class='tab_item'>Latest Articles </span>
            <span class='tab_item'>Latest Blogs </span><span class='tab_item'>Latest News </span>
        </div>
        <div class='slide_content'>
            <div class='tabslider'>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com'>Home </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Resources/AboutUs.aspx'>About Us </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Authors/'>Authors </a></li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/UploadFile/sapnabeniwal/animated-tab-menu-using-jquery/'>
                        Animated Tab Menu Using jQuery </a></li>
                    <li><a href='http://www.c-sharpcorner.com/UploadFile/6cde20/concept-of-view-in-sql-server/'>
                        Concept of View in SQL Server</a></li>
                    <li><a href='http://www.gayadesign.com/general/new-looks-coming-your-way/%27%3EImplodeImplode()
                        and Explode() Function in PHP </a></li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8506/export-windows-live-mail-to-outlook.aspx'>
                        Export Windows Live Mail to Outlook </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8274/insert-data-in-grid-view-without-using-database.aspx'>
                        Insert data in Grid View without using database </a></li>
                    <li><a href='http://www.c-sharpcorner.com/Blogs/8521/html-table.aspx'>HTML TABLE </a>
                    </li>
                </ul>
                <ul>
                    <li><a href='http://www.c-sharpcorner.com/News/1379/discountAsp-Net-joins-microsoft-visual-studio-industry-progr.aspx'>
                        DiscountASP.NET Joins Microsoft Visual Studio Industry Program</a></li>
                    <li><a href='http://www.c-sharpcorner.com/News/1368/microsoft-dynamic-nav-web-client.aspx'>
                        Microsoft Dynamic NAV Web Client </a></li>
                    <li><a href='http://www.c-sharpcorner.com/News/1370/microsoft-released-windows-8-consumer-preview.aspx'>
                        Microsoft Released Windows 8 Consumer Preview</a></li>
                </ul>
            </div>
        </div>
    </div>
    </form
>
</body>
</html>

Step 10: In this step we are going to run the Default2.aspx page by pressing F5.

img7.gif

Step 11: In this step we are going to run the Default2.aspx page by pressing F5.

img8.gif

Now see how to switch content through tabs. MouseHover on next tab.

img9.gif

img10.gif

img11.gif

See the MouseHover effect.

img13.gif
 

Check the link click on Home Button.
 

img14.gif

Resources

Up Next
    Ebook Download
    View all
    Learn
    View all