Post
Ask Question

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


Similar Articles