Posted By

claudiowebdesign on 08/18/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

spee66


Animated link underline


 / Published in: jQuery
 

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

  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  

You need to login to post a comment.