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:
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>
ishita joshiPosted Aug 26, 2012, 4:52 AM
Thanks a Bunch~~~!!