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
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:
When you hold the cursor on a specific menu item its child node will display as below.
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.