/ best free open source web 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

  • http://www.majalahblog.com Dxbion

    Great Tips
    Thanks a lot

  • http://collinbrady.com Collin

    Slick – thanks =)

  • Radiculous

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

    Thanks for this :)

  • http://fedmich.com/life fedmich

    Good for minimalistic design :)

  • http://www.ajlcomputers.com Alan


    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?


  • http://www.ajlcomputers.com Alan

    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