/ best free open source web resources /

Graphic Resources

jQuery Magic Line Sliding Style Navigation

Posted · Category: License Free, Menu

jQuery Magic Line Navigation allows us to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities.

As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.


Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/MagicLine/
License: License Free

  • Great Tips
    Thanks a lot

  • Slick – thanks =)

  • Radiculous

    nifty! :D another take on the classic navbar. :)

    Thanks for this :)

  • Good for minimalistic design :)

  • Hi

    Great menu, i have been trying to implement it on my site but I can’t get the current page name to highlight as it should, it just disappears like in the demo. Any ideas on how to resolve this?


  • managed to get the name to highlight but now the magic line appears above the text rather than below, any thoughts?

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons