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
