simple jquery menu animation using Asp.net || menu Animation using JQuery in Asp.net

Labels: ,

The following article is showing about menu designing using JQuery in Asp.net:

Onething you should remember that, if you use jQuery related coding in your web page then you must add jQuery.js file must be included in that page.

Here, you just include the following Script in your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">  

Create a Web Form named as "JqueryMenu.aspx".
You should include the images in "Images" Folder Path, which you want to use in your page.

Copy and paste the following code in your .aspx section.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        li
        {
            border:1px solid black;
            padding:1px 1px 1px 1px;
            width:220px;
            color:White;
            cursor:pointer;
        }
        a { color:White; font-family:Tahoma; }
    </style>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>

JQuery Function for animated menu:

    <script type="text/javascript">
        $(function () {
            $("ul.level1 li").hover(function () {
                $(this).stop().animate({ opacity: 1.7, width: "270px" }, "slow");
            }, function () {
                $(this).stop().animate({ opacity: 2, width: "170px" }, "slow");
            });
        });
    </script>
</head>


In Body Section:

<body>
    <form id="form1" runat="server">

                <asp:Image ID="Image1" runat="server" Height="137px"
                    ImageUrl="~/abstract-background.jpg" Width="942px" />
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"RenderingMode="List"
                    BackColor="White" DynamicHorizontalOffset="2" Font-Names="Verdana"
                    Font-Size="Large" ForeColor="Red" StaticSubMenuIndent="10px"
                    Font-Bold="True" Font-Italic="True" BorderColor="Blue"
                    BorderStyle="Double" Font-Overline="True">           
            <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#FFFBD6" />
            <DynamicSelectedStyle BackColor="#FFCC66" />
            <DynamicItemTemplate>
                <%# Eval("Text") %>
            </DynamicItemTemplate>
            <Items>
                <asp:MenuItem NavigateUrl="~/Home.aspx" ImageUrl="~/home.jpg"Text="Home"
                    Value="Home" PopOutImageUrl="~/contactus.png"  />
                <asp:MenuItem NavigateUrl="~/About us.aspx" ImageUrl="~/about us.png"
                    Text="About Us" Value="AboutUs" />
                <asp:MenuItem NavigateUrl="~/product.aspx" ImageUrl="~/pro.jpg"
                    Text="Products" Value="Products" />
                <asp:MenuItem NavigateUrl="~/contact us.aspx" ImageUrl="~/contactus.png"
                    Text="Contact Us" Value="ContactUs" />
            </Items>
            <StaticHoverStyle BackColor="#990000" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticSelectedStyle BackColor="#FFCC66" />
        </asp:Menu>
    </form>
</body>
</html>

Then run the application and see the Output Like the below:


2 comments:

Subscribe to: Post Comments (Atom)