blogspot visit counter

Friday, 4 April 2014

Jquery Menu Animation in Asp.net

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

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



Description :- I have already explained many article related to jquey in asp.net. Now we will learn how to design animated article in asp.net 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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery Menu Animation in Asp.net || Menu Animation in Asp.net Using Jquery </title>
    <style type="text/css">
li
{
border:1px solid black;
padding:15px 15px 15px 15px;
width:100px;
background-color: Maroon;
color:White;
cursor:pointer;
}
a { color:White; font-family:Tahoma; }
</style>
<script type ="text/javascript" src="js/jquery-1.4.4.min.js">
</script>

<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");
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id ="menu">
        <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List">
        <Items>
<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" />
</Items>
        </asp:Menu> 

    </div>
    </form>
</body>
</html>

Output as shown below


Download sample code attached

 Jquery menu  design in  asp.net


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...