Introduction
This
article will show you how to create a rotating tab menu using jQuery
and CSS step by step. We will create a menu with small icons that will
rotate when hovering. Also, we will make the menu item expand and reveal
some menu content, like links or a search box. jQuery is a great tool
that helps our imagination turn ideas into reality. We can do almost
everything we can think of with the help of this useful tool.
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.
- 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.
Step 4: Than add the style.css files to your Styles folder.
Right-click on style.css files -> copy and paste it inside <Head> section of your page. The reference is look like as.
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
Step 5: In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.
<style type="text/css">
*
{
margin: 0;
padding: 0;
background: #BF3EFF;
}
.title
{
width: 703px;
height: 144px;
position: absolute;
top: 0px;
left: 0px;
background: #BF3EFF;
}
a.back
{
background: #BF3EFF ;
position: fixed;
width: 150px;
height: 27px;
outline: none;
bottom: 0px;
left: 0px;
}
</style>
Step 6: 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 the selected files respectively -> copy and paste it inside <Head> section of your page; see step 7.
Step 7:
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 src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script src="Scripts/jquery-css-transform.js" type="text/javascript"></script>
Step 8: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.
<script type="text/javascript">
$('.item').hover(
function () {
var $this = $(this);
expand($this);
},
function () {
var $this = $(this);
collapse($this);
}
);
function expand($elem) {
var angle = 0;
var t = setInterval(function () {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({ rotate: '+=-40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '268px' }, 1000)
.find('.item_content').fadeIn(400, function () {
$(this).find('p').stop(true, true).fadeIn(600);
});
}
function collapse($elem) {
var angle = 1440;
var t = setInterval(function () {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({ rotate: '+=40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '52px' }, 1000)
.find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}
</script>
Step 9: In this step you will see the body code of the Default2.aspx page which is given below.
Code:
<body>
<body>
<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>
Contact us</h2>
<p>
<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>
Consulting</h2>
<p>
<a href="http://www.c-sharpcorner.com/Consulting/">Why Us</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>
Search</h2>
<p>
<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>
C# Corner Home
</h2>
<p>
<a href="http://www.tympanus.net/">Start</a>
</p>
</div>
</div>
</div>
<script type="text/javascript">
$('.item').hover(
function () {
var $this = $(this);
expand($this);
},
function () {
var $this = $(this);
collapse($this);
}
);
function expand($elem) {
var angle = 0;
var t = setInterval(function () {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({ rotate: '+=-40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '268px' }, 1000)
.find('.item_content').fadeIn(400, function () {
$(this).find('p').stop(true, true).fadeIn(600);
});
}
function collapse($elem) {
var angle = 1440;
var t = setInterval(function () {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({ rotate: '+=40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '52px' }, 1000)
.find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}
</script>
</body>
Step 10: In this step we will see the complete code of the Default2.aspx page which is given below.
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="RoundedMenu.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>Rounded Menu Using jQuery</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script src="Scripts/jquery-css-transform.js" type="text/javascript"></script>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*
{
margin: 0;
padding: 0;
background: #BF3EFF;
}
.title
{
width: 703px;
height: 144px;
position: absolute;
top: 0px;
left: 0px;
background: #BF3EFF;
}
a.back
{
background: #BF3EFF;
position: fixed;
width: 150px;
height: 27px;
outline: none;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>
Contact us</h2>
<p>
<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>
Consulting</h2>
<p>
<a href="http://www.c-sharpcorner.com/Consulting/">Why Us</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>
Search</h2>
<p>
<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>
C# Corner Home
</h2>
<p>
<a href="http://www.tympanus.net/">Start</a>
</p>
</div>
</div>
</div>
<script type="text/javascript">
$('.item').hover(
function () {
var $this = $(this);
expand($this);
},
function () {
var $this = $(this);
collapse($this);
}
);
function expand($elem) {
var angle = 0;
var t = setInterval(function () {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({ rotate: '+=-40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '268px' }, 1000)
.find('.item_content').fadeIn(400, function () {
$(this).find('p').stop(true, true).fadeIn(600);
});
}
function collapse($elem) {
var angle = 1440;
var t = setInterval(function () {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({ rotate: '+=40deg' }, 0);
}, 10);
$elem.stop().animate({ width: '52px' }, 1000)
.find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}
</script>
</body>
</html>
Step 11: In this step we will see the design of the Default2.aspx page which is given below.
Step 12: In this step we are going to run the Default2.aspx page by pressing F5.
Now to see the rounding and expanding effect, click on the small icon.
0 comments:
Post a Comment