JQuery

A Smooth Tabbed Menu Using JQuery


Introduction

This article will show you how to create a smooth tabbed menu using jQuery and CSS step by step. Nowadays, many websites are using tab based content as a way to save spaces in a webpage. I have seen many wordpress websites using a tabbed interface for its category, posts, comments and random posts content. 

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.

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.

Now add an image in the "Images" folder of the project.

Than add the general.css files to your Styles folder.

Right-click on general.css files -> copy and paste it inside <Head> section of your page.

Than add the tabs.js files to your Scripts folder.

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

img4.jpg

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

Step 4: 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 5: In this step you will see the body code of the Default2.aspx page which is given below.

Code

<body>

       <div id="container">

               <ul class="menu">

                     <li id="news" class="active">News</li>

                     <li id="tutorials">Tutorials</li>

                     <li id="links">Links</li>

              </ul>

              <span class="clear"></span>

              <div class="content news">

                      <h1>Latest News</h1>

                     <ul>

                           <li><img src="images/arrow.gif" alt="-" /> Facebook offers Rs 1.34 cr package to engineering student</li>

                           <li><img src="images/arrow.gif" alt="-" /> Infosys, TCS, Sify bag Department of Post projects</li>

                           <li><img src="images/arrow.gif" alt="-" /> Google Maps Now Includes Real-Time Traffic Data</li>

 

                           <li><img src="images/arrow.gif" alt="-" /> 10 Resume Tips for Technology Professionals </li>

                     <ul>

              </div>

              <div class="content tutorials">

                     <h1>Latest Tutorials</h1>

                     <ul>

                           <li><img src="images/arrow.gif" alt="-" /> Rotate an Image Via Code in Windows Phone 7</li>

 

                           <li><img src="images/arrow.gif" alt="-" />File Accessing in Windows 8 Metro Style Apps</li>

                           <li><img src="images/arrow.gif" alt="-" /> Canvas Shape Tango Animation Using HTML 5</li>

                           <li><img src="images/arrow.gif" alt="-" />      How to Turn on System Protection in Windows 8</li>

                           <li><img src="images/arrow.gif" alt="-" /> Getting Started With Windows Phone 7</li>

 

                           <li><img src="images/arrow.gif" alt="-" />      Working With Calendar in Window Phone 7</li>
                     <ul>
              </div>

              <div class="content links">

                     <h1>You may visit</h1>

                     <ul>
                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.c-sharpcorner.com"/>http://www.c-sharpcorner.com/ </a> - C#Corner.com!</li>

 

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dbtalks.com/">http://www.dbtalks.com/ </a> - D B Talks</li>

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dotnetheaven.com/"> http://www.dotnetheaven.com/ </a> - .Net Heaven ;)</li>

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.interviewcorner.com//">http://www.interviewcorner.com//</a> - Interview Corner</li>
                     <ul>
              </div>
       </div>
</body>

 

Step 6: 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 Smooth Tabbed Menu Using jQuery </title>
    <link href="Styles/general.css" rel="stylesheet" type="text/css" media="screen" />

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

    <script src="Scripts/tabs.js" type="text/javascript"></script>

</head>

<body>

       <div id="container">

               <ul class="menu">

                     <li id="news" class="active">News</li>

                     <li id="tutorials">Tutorials</li>

                     <li id="links">Links</li>

              </ul>

              <span class="clear"></span>

              <div class="content news">

                    <h1>Latest News</h1>

                     <ul>

                           <li><img src="images/arrow.gif" alt="-" /> Facebook offers Rs 1.34 cr package to engineering student</li>

                           <li><img src="images/arrow.gif" alt="-" /> Infosys, TCS, Sify bag Department of Post projects</li>

                           <li><img src="images/arrow.gif" alt="-" /> Google Maps Now Includes Real-Time Traffic Data</li>

                            <li><img src="images/arrow.gif" alt="-" /> 10 Resume Tips for Technology Professionals </li>

                    <ul>

              </div>

              <div class="content tutorials">

                     <h1>Latest Tutorials</h1>

                     <ul>

                           <li><img src="images/arrow.gif" alt="-" /> Rotate an Image Via Code in Windows Phone 7</li>

 

                           <li><img src="images/arrow.gif" alt="-" />File Accessing in Windows 8 Metro Style Apps</li>

                           <li><img src="images/arrow.gif" alt="-" /> Canvas Shape Tango Animation Using HTML 5</li>

                           <li><img src="images/arrow.gif" alt="-" />      How to Turn on System Protection in Windows 8</li>

                           <li><img src="images/arrow.gif" alt="-" /> Getting Started With Windows Phone 7</li>

 

                           <li><img src="images/arrow.gif" alt="-" />      Working With Calendar in Window Phone 7</li>

                     <ul>

              </div>

              <div class="content links">

                     <h1>You may visit</h1>

                     <ul>

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.c-sharpcorner.com"/>http://www.c-sharpcorner.com/ </a> - C#Corner.com!</li>

 

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dbtalks.com/">http://www.dbtalks.com/ </a> - D B Talks</li>

                            <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.dotnetheaven.com/"> http://www.dotnetheaven.com/ </a> - .Net Heaven ;)</li>

                           <li><img src="images/arrow.gif" alt="-" /> <a href="http://www.interviewcorner.com//">http://www.interviewcorner.com//</a> - Interview Corner</li>
                     <ul>
              </div>
       </div>
</body>

</html>

 

Step 7: In this step we will see the design of the Default2.aspx page which is given below.

img5.jpg

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

img6.jpg

Now click on next tab to see the effect.

img7.jpg

img8.jpg

 Resources

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs