Simple Horizontal Menu Animation using jQuery


Introduction

Jquery  is one of the best JavaScript framework. With jQuery we can create amazing effects on the web pages, writing some few lines of codes, and you don't need to be an experienced web programmer.

In this article I will show you how to create a nice and simple horizontal menu with css and jQuery, writing few lines of  code. With JQuery I will move and animate the link on the right when the mouse is over, so I need to move the image too, and for the reason that I've used the image like background and no like image in the html code, I need to move that when the link will animated, maybe using directly the image in the code the effect will come better, you can try at your own. so let see that how we will make it.

Step 1: Firstly we have to create a Web Application.

  •  Go to Visual Studio 2010.
  •  Create the web Application.
  •  Click OK.

img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right Click o 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 we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

img4.gif

Step 4: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you like most to placed it.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 5: In this step we will write code for the css inside the Default2.aspx page which will be always inside between <style></style> let see the code of css given below.

<style type="text/css">
       *
       {
           margin: 0;
           padding: 0;
       }
       body
       {
           font: 12px Arial, Helvetica, sans-serif;
           color: black;
       }
       a
       {
           text-decoration: none;
           color: black;
       }
       #wrapper
       {
           padding: 40px 40px;
       }
       #menu
       {
           float: left;
       }
       ul, li
       {
           list-style: none;
       }
       li
       {
           padding: 10px 10px;
           height: 40px;
           float: left;
           width: 100px;
           background-color: #FFFF99;
           border-right: 1px solid #666666;
           overflow: hidden;
           display: block;
       }
       li a
       {
           float: left;
           vertical-align: top;
           position: absolute;
       }
       li p
       {
           vertical-align: top;
           text-align: left;
           margin-left: 0;
           margin-top: 0;
           padding-left: 65px;
           width: 155px;
           text-align: right;
           color: #FF00FF;
           display: none;
       }
   </style
>

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

<script type="text/javascript">
        $(document).ready(function () {
            // initialize default menu width
             initwidth = $("li").width(); // updated
            // hover in
            $("li").hover(function () {
                // get the title inside <a>
                description = $(this).children("a").attr("title");
                // start the animation
                $(this).stop().animate({ width: "220" }, { queue: false, duration: "fast" });
                // remove previously <p>
                $(this).children("p").remove();
                // create <p> and attach title into it
                $(this).find("a").after("<p>" + description + "</p>")
                // create animation to make it looks good
                $(this).children("p").stop().animate({ opacity: "show" }, { queue: false, duration: "fast" });
                // hover out
            }, function () {
                // animate it to the basic width
                $(this).stop().animate({ width: initwidth }, { queue: false, duration: "fast" });
                // fade out animation
                $(this).children("p").stop().animate({ opacity: "0" }, { queue: false, duration: "fast" });
            });
        });
</script
>

Step 7: In this step we will write the code for the design part of the default2.aspx page which will be inside the <body></body> tag.

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <ul id="menu">
            <li><a href="http://www.c-sharpcorner.com/" title="jump to the front page">Home</a></li>
            <li><a href="#" title="Want to know more about us?">About Us</a></li>
            <li><a href="#" title="Contact us, call any time you want">Contact Us</a></li>
            <li><a href="#" title="See our advertise, call any time for advertising service">Advertise</a></li>
        </ul>
    </div>
    </form
>
</body>

Step 8: In this step we will write complete code for the source file of Default2.aspx page let see the code 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>Simple horizontal menu with css and jquery</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            // initialize default menu width
             initwidth = $("li").width(); // updated
            // hover in
            $("li").hover(function () {
                // get the title inside <a>
                description = $(this).children("a").attr("title");
                // start the animation
                $(this).stop().animate({ width: "220" }, { queue: false, duration: "fast" });
                // remove previously <p>
                $(this).children("p").remove();
                // create <p> and attach title into it
                $(this).find("a").after("<p>" + description + "</p>")
                // create animation to make it looks good
                $(this).children("p").stop().animate({ opacity: "show" }, { queue: false, duration: "fast" });
                // hover out
            }, function () {
                // animate it to the basic width
                $(this).stop().animate({ width: initwidth }, { queue: false, duration: "fast" });
                // fade out animation
                $(this).children("p").stop().animate({ opacity: "0" }, { queue: false, duration: "fast" });
            });
        });
</script
>
<style type="text/css">
       *
       {
           margin: 0;
           padding: 0;
       }
       body
       {
           font: 12px Arial, Helvetica, sans-serif;
           color: black;
       }
       a
       {
           text-decoration: none;
           color: black;
       }
       #wrapper
       {
           padding: 40px 40px;
       }
       #menu
       {
           float: left;
       }
       ul, li
       {
           list-style: none;
       }
       li
       {
           padding: 10px 10px;
           height: 40px;
           float: left;
           width: 100px;
           background-color: #FFFF99;
           border-right: 1px solid #666666;
           overflow: hidden;
           display: block;
       }
       li a
       {
           float: left;
           vertical-align: top;
           position: absolute;
       }
       li p
       {
           vertical-align: top;
           text-align: left;
           margin-left: 0;
           margin-top: 0;
           padding-left: 65px;
           width: 155px;
           text-align: right;
           color: #FF00FF;
           display: none;
       }
</style
>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <ul id="menu">
            <li><a href="http://www.c-sharpcorner.com/" title="jump to the front page">Home</a></li>
            <li><a href="#" title="Want to know more about us?">About Us</a></li>
            <li><a href="#" title="Contact us, call any time you want">Contact Us</a></li>
            <li><a href="#" title="See our advertise, call any time for advertising service">Advertise</a></li>
        </ul>
    </div>
    </form
>
</body>

Step 9: In this step we will see the design page of the default2.aspx page let see the figure given below.

img5.gif

Step 10: In this step we are going to run the application by pressing F5 let see the output given below.

img61.gif

Now Mousehover on the menu you will see the effect like as.

img72.gif

click on Home button I have been given there the reference of "charpcorner.com".

img8.gif

img91.gif

img101.gif

img111.gif


Resources