Advanced Search

Return to Snippet

Revision: 50346
at August 18, 2011 08:34 by claudiowebdesign
Initial Code 
<nav>
	<a href="#">home</a>
	<a href="#">contact</a>
	<a href="#">servizi</a>
	<a href="#">gallery</a>
	<a href="#">blog</a>
	<span></span>
</nav>

--------------------------------------------------------------------------------------

nav a{text-decoration:none}
nav span{background:#000;height:.3em;display:block;position:relative;width:50px;left:0}
---------------------------------------------------------------------------------------

$('a','nav').mouseover(function(){
	$('span','nav').animate({
		'width': $(this).width(),
		 'left': $(this).position().left}
	,'fast')
})
Initial URL 









Initial Description





The underlining under the links moves smoothly between them, just like the menu navigation in http://www.claudiobonifazi.com









Initial Title





Animated link underline









Initial Tags














Initial Language





jQuery