Create nice animation on your ASP.NET Menu control using jQuery
- by hajan
In this blog post, I will show how you can apply some nice animation effects on your ASP.NET Menu control.
ASP.NET Menu control offers many possibilities, but together with jQuery, you can make very rich, interactive menu accompanied with animations and effects.
Lets start with an example:
- Create new ASP.NET Web Application and give it a name
- Open your Default.aspx page (or any other .aspx page where you will create the menu)
- Our page ASPX code is:
<form id="form1" runat="server"> <div id="menu"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home" /> <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" /> <asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" /> <asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" /> </Items> </asp:Menu> </div> </form>
As you can see, we have ASP.NET Menu with Horizontal orientation and RenderMode=”List”. It has four Menu Items where for each I have specified NavigateUrl, ImageUrl, Text and Value properties.
All images are in Images folder in the root directory of this web application. The images I’m using for this demo are from Free Web Icons.
- Next, lets create CSS for the LI and A tags (place this code inside head tag)
<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>
This is nothing very important and you can change the style as you want.
- Now, lets reference the jQuery core library directly from Microsoft CDN.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
- And we get to the most interesting part, applying the animations with jQuery
Before we move on writing jQuery code, lets see what is the HTML code that our ASP.NET Menu control generates in the client browser.
<ul class="level1"> <li><a class="level1" href="Default.aspx"><img src="Images/Home.png" alt="" title="" class="icon" />Home</a></li> <li><a class="level1" href="About.aspx"><img src="Images/Friends.png" alt="" title="" class="icon" />About Us</a></li> <li><a class="level1" href="Products.aspx"><img src="Images/Box.png" alt="" title="" class="icon" />Products</a></li> <li><a class="level1" href="Contact.aspx"><img src="Images/Chat.png" alt="" title="" class="icon" />Contact Us</a></li> </ul>
So, it generates unordered list which has class level1 and for each item creates li element with an anchor with image + menu text inside it.
If we want to access the list element only from our menu (not other list element sin the page), we need to use the following jQuery selector: “ul.level1 li”, which will find all li elements which have parent element ul with class level1.
Hence, the jQuery code is:
<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>
I’m using hover, so that the animation will occur once we go over the menu item. The two different functions are one for the over, the other for the out effect.
The following line
$(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow"); does the real job. So, this will first stop any previous animations (if any) that are in progress and will animate the menu item by giving to it opacity of 0.7 and changing the width to 170px (the default width is 110px as in the defined CSS style for li tag). This happens on mouse over. The second function on mouse out reverts the opacity and width properties to the default ones. The last parameter “slow” is the speed of the animation.
The end result is:
The complete ASPX code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET Menu + jQuery</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: "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="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home" />
<asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" />
<asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" />
<asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
Hope this was useful.
Regards, Hajan
