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.

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

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