2015-06-20

How to add sliding menu animation to asp.net menu control

In this tutorial I’m going to show you how to add sliding animation when you hover the asp:Menu. I’m using jQuery library for that.

menu

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ForumsTest.WebForm1" %>

<!DOCTYPE html />
<html>
<head runat="server">
<title>Sliding menu</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<script type="text/javascript">
$(function () {
$('#selected').css('width', $('li').width());
$('#Menu1 > ul> li').hover(function () {
var menuItem = $(this);
$('#selected').stop().animate({
width: menuItem.width(), left: $(this).position().left
}, 'medium', 'linear');
});
});
</script>
<style type="text/css">
ul {
float: left;
height: 40px;
width: 960px;
list-style: none;
}

li {
display: block;
}

.menu {
position: absolute;
left: 0;
}

#Menu1 > ul > li {
padding-left: 10px;
padding-right: 10px;
}

#selected {
background-color: lightblue;
height: 15px;
position: absolute;
border: 2px solid blue;
border-radius: 20px;
left: 0;
padding: 10px;
}

#Menu1 a {
line-height: 40px;
}
</style>
</head>
<body>
<form runat="server">
<span id="selected"></span>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false" CssClass="menu">
<Items>
<asp:MenuItem Text="First Menu Item" Value="First Menu Item">
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Second" Value="Second">
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Third Menu Item" Value="Third Menu Item">
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
<asp:MenuItem Text="Sub item" Value="Sub item"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</form>
</body>
</html>

This is a very simple script which enable the sliding animation on the asp.net menu control when user hover on the menu items.

<script type="text/javascript">
$(function () {
$('#selected').css('width', $('li').width());
$('#Menu1 > ul> li').hover(function () {
var menuItem = $(this);
$('#selected').stop().animate({
width: menuItem.width(), left: $(this).position().left
}, 'medium', 'linear');
});
});
</script>

I've included a span tag (#selected) to add the mouse hover style to the menu items. First of all I'm setting the width of that span to match with the menu item width on the page load. Then on hover of each of the first level menu items (In order to select only the first level menu items, I'm using the jQuery selector as #Menu1 > ul > li. That will give me the immediate ul child element of Menu and the immediate list items of that ul) I'm setting the width of the span to the selected menu item width and the left position of the span to be same as the left position of the menu item.


In order to add the sliding animation, I'm using the jQuery animate function. Inside the animate function, I'm setting the width and the left position of the span. animate() function will then take those two CSS properties and will apply those style in ‘linear’ easing with ‘medium’ speed. In that way you can achieve a sliding animation when user navigates across menu items.


I’m using the stop() method on that span so the animation wouldn’t queue up. Since the user can move the mouse fast, the animations can build up and will appear with a delay even after user finish the mouse movement. In order to avoid building up the animation as a queue, I call stop() jQuery method on the span.


Note that I’ve disabled the default pop out image for the menu items and set the Orientation to Horizontal.


You can play with the CSS and apply any style you want. Also, you can use jQuery UI plugin so you have many more easing to be used with animation other than linear. With core jQuery library you are limited to use either linear or swing (Default is swing).


That’s it!

9 comments:

yetiken software said...

Your post will be rather good, and I’m sure some will find it interesting because it’s about a topic that’s as widely discussed as others. Some may even find it useful.Thanks so much for your post. mobile app development

Hire SSRS Developer said...

Thanks for the post! This information will be very helpful for me. I will definitely bookmark your blog..

Thomas Owen said...

thanks for the post, really this information is very useful for all of us
RmBusinessSolutions

Devlon Infotech said...

thanks for sharing such a good information. but if you would present this information with some good image and screenhot then it would be perfect.

Muthukumar Seeniyappan said...

This code is very helpful to me and also this article clearly explain about how to add sliding menu animation to asp.net menu control. Thanks for sharing this post. Mobile application development

Smith Cole said...

Hi, I really thankful to you for sharing this informative blog to provide new and updated info. Really, this blog is very much helpful for me because here it explains clearly, so that anyone can understand and also add. Recently I found a blog on Running applications of ASP.NET, by which I able to know some idea about Asp.net. Keep blogging like this.

Phoenix Infomedia said...

Keep sharing. Your blog contains very good information, it clears many doubts that i was having. It helps a lot in mobile application development.Thanks..

Kuldeep Gohil said...

Great information.Thank you for sharing this information.Very helpful for Mobile application development.
Offshore software development company India

Harshad Patel said...

Thanks for sharing this wonderful information. I will be waiting for your next level post. Keep sharing.
Mobile App Developers in india