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


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.