Advanced Search

Animated link underline

/ Published in: jQuery
Save to your folder(s)
The underlining under the links moves smoothly between them, just like the menu navigation in http://www.claudiobonifazi.com

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <nav>
  2. 	<a href="#">home</a>
  3. 	<a href="#">contact</a>
  4. 	<a href="#">servizi</a>
  5. 	<a href="#">gallery</a>
  6. 	<a href="#">blog</a>
  7. 	<span></span>
  8. </nav>
  9.  
  10. --------------------------------------------------------------------------------------
  11.  
  12. nav a{text-decoration:none}
  13. nav span{background:#000;height:.3em;display:block;position:relative;width:50px;left:0}
  14. ---------------------------------------------------------------------------------------
  15.  
  16. $('a','nav').mouseover(function(){
  17. 	$('span','nav').animate({
  18. 		'width': $(this).width(),
  19. 		 'left': $(this).position().left}
  20. 	,'fast')
  21. })

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.