Rounded Tab Menu Using jQuery and CSS

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.

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.

Step 3: Now add some image in the "Images" folder of the project.

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.

Step 5: In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.

{

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.

Step 8: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.

$('.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>

<h2>

<p>

<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>

</p>

</div>

<h2>

Consulting</h2>

<p>

</p>

</div>

<h2>

Search</h2>

<p>

</p>

</div>

<h2>

C# Corner Home

</h2>

<p>

<a href="http://www.tympanus.net/">Start</a>

</p>

</div>

$('.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">

<title>Rounded Menu Using jQuery</title>

{

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>

<h2>

<p>

<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>

</p>

</div>

<h2>

Consulting</h2>

<p>

</p>

</div>

<h2>

Search</h2>

<p>

</p>

</div>

<h2>

C# Corner Home

</h2>

<p>

<a href="http://www.tympanus.net/">Start</a>

</p>

</div>

$('.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.

Resources