Dynamic Menu control in ASP.NET using jQuery

The Dynamic display of ASP.NET menu control using jQuery provides a display in which only the user specified portions of menu control are static with its child nodes.
  • 2698

The ASP.NET Menu control is one of the most useful control with static and dynamic display on the web pages.

The Menu control is completely expanded and fully visible all the time whenever  a user can click on any part in the menu control. But in dynamic display, only the portion user specify are static, when the user holds the mouse pointer over the parent node their child menu items are displayed.

Here you will see that how to display ASP.NET menu control dynamically using jQuery which makes your menu control more interactive and rich with animation effects.

Menu Tasks

menuanimation 1.gif

You can change the formatting of menu control from the menu task bar.

Complete Aspx Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>ASP.NET Annimation</title>
  <style type="text/css">
     li 
    { 
        border:1px solid black
        padding:20px 20px 20px 20px
        width:110px
        background-color:Gray
        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>
 <script type="text/javascript">
    $(function ()
    {
       $("ul.level1 li").hover(function ()
       {
           $(this).stop().animate({ opacity: 0.7, width: "370px" }, "slow");
        }, function () 
           {
              $(this).stop().animate({ opacity: 1, width: "110px" }, "slow");
            });
     });
 </script>
</head>
<
body bgcolor="#e0e0e0">
  <form id="form1" runat="server">
  <div id="menu">
     <br />
     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
          RenderingMode="List" StaticSubMenuIndent="16px">            
       <Items>
          <asp:MenuItem ImageUrl="jaipur.jpg" Text="The beautiful Pink city: Jaipur." Value="The beautiful Pink city:
Jaipur."/>
          <asp:MenuItem ImageUrl="Mussoorie.jpg" Text="A Wonderful hill station: Mussoorie." Value="A Wonderful hill
station: Mussoorie."/>
 
        <asp:MenuItem ImageUrl="Kerrala.jpg" Text="The "Paradise of the South": Kerala." Value="The "Paradise of the South": Kerala."/>
          <asp:MenuItem ImageUrl="simla.jpg" Text="Blessed with natural goodness: Shimla." Value="Blessed with natural goodness: Shimla."/> 
       </Items>
    </asp:Menu>
  </div>
 </form>
</body>

The end result is:
menuanimation 2.gif

When you hold the cursor on a specific  menu item its child node will display as below.

menuanimation 3.gif

 

Note:  There is a notable aspect that the static menu controls can never merge and dynamic style is applied if and only if a static style is not defined.

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.