Animated Tab Menu Using jQuery

Introduction

This tutorial will show you how to build your own tabbed interface using jQuery. Tabbed interfaces and tabbed structure menus are becoming very popular in web design & development. Tabs are used for improving the utilization of space and to provide stylish effects in a website. jQuery tabs are very popular and create some fancy looks for web pages. I have used CSS to make a rounded style. It doesn't work for IE but its fine in Firefox and Chrome. I hope you will like this stylish and sexy tabs tutorial.

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 add the screen.css file to your Styles folder.

img4.gif

and right-click on the screen.css file -> copy and paste it inside <Head> section of your page.

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

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

img5.gif

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

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the <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 6: In this step we write the jQuery code which is given below.

<script type="text/javascript">
        $(document).ready(function () {
            $("#first-tab").addClass('buttonHover');
        });
        function navigate_tabs(container, tab) {
            $(".b").css('display', 'none');
            $(".c").css('display', 'none');
            $(".a").css('display', 'none');
            $("#first-tab").removeClass('buttonHover');
            $("#second-tab").removeClass('buttonHover');
            $("#third-tab").removeClass('buttonHover'); 
            $("#" + tab).addClass('buttonHover');
            $("." + container).show('slow');
        }
</script>

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

<body>
    <form id="form1" runat="server">
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <div align="center">
        <div id="wrap">
            <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">
                MCN</a> <a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">
                    C#</a> <a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">
                        Java</a>
            <br clear="all" />
            <div id="body" align="center">
                <div class="a">
                    <em>MCN</em>Hello and thank you for visiting the Mindcracker Network. The Mindcracker
                     Network with its global headquarters in Philadelphia, PA was founded in 1999 with a
                     single goal in mind - to provide an online platform for Information Technology
                     Developers and Information Technology Professionals to exchange their knowledge and
                     experience by teaching and learning from one another by using various interactive
                     online methods such as contributing articles, discussion forums, blogs, and videos.
                    <br />
                    <br />
                    Thanks!
                </div>
                <div class="b">
                    <em>C#</em>(pronounced "C-sharp") is an object-oriented programming language from
                    Microsoft that aims to combine the computing power of C++ with the programming ease
                    of Visual Basic. C# is based on C++ and contains features similar to those of Java.
                </div>
                <div class="c">
                    <em>Java</em>is a programming language and computing platform first released by
                     Sun Microsystems in 1995. It is the underlying technology that powers state-of-the-art
                     programs including utilities, games, and business applications. Java runs on more
                     than 850 million personal computers worldwide, and on billions of devices worldwide,
                     including mobile and TV devices.
                </div>
            </div>
        </div>
    </div>
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    </form
>
</body>

Step 8: 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>A Simple Animated Tab Using jQuery </title>
     <
link rel="stylesheet" type="text/css" href="Styles/screen.css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.js"></script
>
<script type="text/javascript">
        $(document).ready(function () {
            $("#first-tab").addClass('buttonHover');
        });
        function navigate_tabs(container, tab) {
            $(".b").css('display', 'none');
            $(".c").css('display', 'none');
            $(".a").css('display', 'none');
            $("#first-tab").removeClass('buttonHover');
            $("#second-tab").removeClass('buttonHover');
            $("#third-tab").removeClass('buttonHover'); 
            $("#" + tab).addClass('buttonHover');
            $("." + container).show('slow');
        }
</script>
</
head>
<
body>
    <form id="form1" runat="server">
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <div align="center">
        <div id="wrap">
            <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">
                MCN</a> <a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">
                    C#</a> <a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">
                        Java</a>
            <br clear="all" />
            <div id="body" align="center">
                <div class="a">
                    <em>MCN</em>Hello and thank you for visiting the Mindcracker Network. The Mindcracker
                     Network with its global headquarters in Philadelphia, PA was founded in 1999 with a
                     single goal in mind - to provide an online platform for Information Technology
                     Developers and Information Technology Professionals to exchange their knowledge and
                     experience by teaching and learning from one another by using various interactive
                     online methods such as contributing articles, discussion forums, blogs, and videos.
                    <br />
                    <br />
                    Thanks!
                </div>
                <div class="b">
                    <em>C#</em>(pronounced "C-sharp") is an object-oriented programming language from
                    Microsoft that aims to combine the computing power of C++ with the programming ease
                    of Visual Basic. C# is based on C++ and contains features similar to those of Java.
                </div>
                <div class="c">
                    <em>Java</em>is a programming language and computing platform first released by
                     Sun Microsystems in 1995. It is the underlying technology that powers state-of-the-art
                     programs including utilities, games, and business applications. Java runs on more
                     than 850 million personal computers worldwide, and on billions of devices worldwide,
                     including mobile and TV devices.
                </div>
            </div>
        </div>
    </div>
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    <br clear="all" />
    </form
>
</body>
</html>

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

img6.gif

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

img7.gif

Click on C# and see also the MouseHover effect on Tab.

img8.gif

Click on Java.

img9.gif

Resources

Up Next
    Ebook Download
    View all
    Learn
    View all