Animated Menu Using jQuery and CSS

Introduction

This article will show you how to create an animated menu using jQuery and CSS step by step. I'd like to explain how they work with a pure CSS version and a jQuery version.

Description

There are two techniques we want to do:

  1. opacity and
  2. widen the button

Opacity is an effortless technique since it was supported by CSS while widening the button is only CSS technique by increasing the button's current padding with some pixels number. So, when the user mouseovers the button we will add its padding to make it wide and decrease the button's opacity when the user clicks it.

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

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

img3.gif

Step 3 : In this step add the demo.css file to your Styles folder.

IMG4.jpg

Right-click on the demo.css file ->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" type="text/css" href="Styles/demo.css" />

Step 4: 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:

IMG5.jpg

Right-click on selected files respectively -> copy and paste it inside <Head> section of your page; see step 5.

Step 5: 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 type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.color.js"></script
>

Step 6: In this step we write the jQuery code which is given below.

<script type="text/javascript">
        $(document).ready(function () {
            $('#menu-jquery li a').hover(
                                  function () {
 
                                      $(this).css('padding', '5px 15px')
                                                        .stop()
                                                        .animate({ 'paddingLeft': '25px',
                                                            'paddingRight': '25px',
                                                            'backgroundColor': 'rgba(0,0,0,0.5)'
                                                        },
                                                                            'fast');
                                  },
                                  function () {
                                      $(this).css('padding', '5px 25px')
                                                        .stop()
                                                        .animate({ 'paddingLeft': '15px',
                                                            'paddingRight': '15px',
                                                            'backgroundColor': 'rgba(0,0,0,0.2)'
                                                        },
                                                                            'fast');
                                  }).mousedown(function () {
                                      $(this).stop().animate({ 'backgroundColor': 'rgba(0,0,0,0.1)' }, 'fast');
                                  }).mouseup(function () {
                                      $(this).stop().animate({ 'backgroundColor': 'rgba(0,0,0,0.5)' }, 'fast');
                                  });
        });
</
script
>

Step 7: In this step you will see the body code of the Default2.aspx page which is given below.

Code:

<body>
    <div id="container">
        <span class="title">Using Pure CSS Animation</span>
        <ul id="menu-css">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <span class="title">Using jQuery Animation</span>
        <ul id="menu-jquery">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-2260508-2");
                pageTracker._trackPageview();
            } catch (err) { }</script>
    </div>
</body>

Step 8: 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 Animated Menu Using jQuery and CSS</title>
<link rel="stylesheet" type="text/css" href="Styles/demo.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.color.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#menu-jquery li a').hover(
                                  function () {
 
                                      $(this).css('padding', '5px 15px')
                                                        .stop()
                                                        .animate({ 'paddingLeft': '25px',
                                                            'paddingRight': '25px',
                                                            'backgroundColor': 'rgba(0,0,0,0.5)'
                                                        },
                                                                            'fast');
                                  },
                                  function () {
                                      $(this).css('padding', '5px 25px')
                                                        .stop()
                                                        .animate({ 'paddingLeft': '15px',
                                                            'paddingRight': '15px',
                                                            'backgroundColor': 'rgba(0,0,0,0.2)'
                                                        },
                                                                            'fast');
                                  }).mousedown(function () {
                                      $(this).stop().animate({ 'backgroundColor': 'rgba(0,0,0,0.1)' }, 'fast');
                                  }).mouseup(function () {
                                      $(this).stop().animate({ 'backgroundColor': 'rgba(0,0,0,0.5)' }, 'fast');
                                  });
        });
</
script>
<head>
<body>
    <div id="container">
        <span class="title">Using Pure CSS Animation</span>
        <ul id="menu-css">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <span class="title">Using jQuery Animation</span>
        <ul id="menu-jquery">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-2260508-2");
                pageTracker._trackPageview();
            } catch (err) { }</script>
    </div>
</body>
</html>

Step 9: In this step we will see the design of the Default2.aspx page which is given below.

img12.jpg

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

IMG6.jpg


IMG7.jpg

IMG8.jpg

IMG9.jpg

IMG10.jpg

IMG11.jpg

Resources