Post
Ask Question

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.

img1.jpg

Step 4: Than add the style.css files to your Styles folder.

img2.jpg

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.

img3.jpg

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>

    <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.

img4.jpg

Step 12: In this step we are going to run the Default2.aspx page by pressing F5.

img5.jpg

Now to see the rounding and expanding effect, click on the small icon.

img6.jpg

img7.jpg

img9.jpg

Resources


Similar Articles