Ads 468x60px

For New Update Use this Link Offer for you


Friday, 4 April 2014

Jquery Menu Animation in

c# .net interview question answers
Categories :-What is JQuery  , Different between Jquery and javascript , JQuery get user ip address , Jquery example using

Introduction :- In this article i am explained how to create a animated menu in This is very nice and easy article for design a animation in menu.

Description :- I have already explained many article related to jquey in Now we will learn how to design animated article in following step as shown below.

Step 1 :-   Open visual stdio-> create a new website->write click on project explorer add new item

step 2 :- Copy the Following code and past in your .aspx page as shown below

<html xmlns="">
<head runat="server">
    <title>Jquery Menu Animation in || Menu Animation in Using Jquery </title>
    <style type="text/css">
border:1px solid black;
padding:15px 15px 15px 15px;
background-color: Maroon;
a { color:White; font-family:Tahoma; }
<script type ="text/javascript" src="js/jquery-1.4.4.min.js">

<script type="text/javascript">
    $(function () {
        $("ul.level1 li").hover(function () {
            $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");
        }, function () {
            $(this).stop().animate({ opacity: 1, width: "110px" }, "slow");
    <form id="form1" runat="server">
    <div id ="menu">
        <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List">
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="Home" Value="Home"  />
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="About Us" Value="AboutUs" />
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="Products List" Value="Products List" />
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="Contact Us" Value="ContactUs" />
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="Carrer" Value="Carrer" />
<asp:MenuItem NavigateUrl="" ImageUrl="" Text="Feedback" Value="Feedback" />


Output as shown below

Download sample code attached

 Jquery menu  design in

No comments:

Post a Comment



New Updates

Related Posts Plugin for WordPress, Blogger...

Related Result