You can try with the below code for a sliding animation on navigation menu
<!DOCTYPE html><html><head><linkhref="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css"rel="stylesheet"type="text/css"/><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script><metacharset="utf-8"><title>JS Bin</title><script> $(function(){// insert slider $(‘ul‘).append(‘<div id="slider"></div>‘);// initially resetvar left = $(‘ul li:first-child a‘).parent().position().left;var width = $(‘ul li:first-child a‘).width(); $(‘#slider‘).css({‘left‘: left,‘width‘: width});// sliding $(‘ul li a‘).hover(function(){var left = $(this).parent().position().left;var width = $(this).width(); $(‘#slider‘).stop().animate({‘left‘: left,‘width‘: width });});});</script><style> ul {position:relative;margin:50px;} ul li {display: inline-block;} ul li a {padding:5px15px;border:1px solid #000;color:#000;text-decoration: none;}#slider {position:absolute;top:-5px;left:0;height:100%;width:0;padding:5px15px;margin-left:1px;background-color:#f00;z-index:-1;}</style></head><body><ul><li><ahref="#">Test Menu 1</a></li><li><ahref="#">Test Menu 2</a></li><li><ahref="#">Test Menu 3</a></li><li><ahref="#">Test Menu 4</a></li><li><ahref="#">Test Menu 5</a></li></ul></body></html>
or
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/jquery-2.1.0.js"></script>
<script>
$(function () {
$(‘#selected‘).css(‘width‘, $(‘li‘).width());
$(‘li‘).hover(function () {
var menuItem = $(this);
$(‘#selected‘).stop().animate({ width: menuItem.width(), left: $(this).position().left }, ‘medium‘, ‘linear‘);
});
});
</script>
<style>
ul {
float: left;
height: 40px;
width: 960px;
list-style: none;
}
li {
display: block;
float: left;
list-style: none;
}
#selected {
background: #D10000;
height: 40px;
position: absolute;
}
li a {
float: left;
line-height: 40px;
padding: 0 20px;
z-index: 20;
display: block;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<form id="myform" runat="server">
<ul>
<li><a>HOME</a></li>
<li><a>SQUADS</a></li>
<li><a>STREET ACADEMY</a></li>
<li><a>CONTACT US</a></li>
<li id="selected"></li>
</ul>
</form>
</body>
</html>
Sliding animation on Nav Menu in mvc 4 application,布布扣,bubuko.com