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!