Project Details
- Author: James Studdart
- Date Released: 13th Sept 2010
- Current Verion: 0.0.6
Download NavIt
GNU GPL
Home > Projects > jQuery > Plugins > NavIt
NavIt
This plugin is still under development
This plugin easily and simply converts a basic html unordered list into animated,
rich navigation for your website.
Below are samples of the two types of menus it will currently produce, along with
a html sample.
All feedback is welcome, so if you are using this plugin, or really like then
get in touch.
What would you like to see, contact us via the form above.
Whats New for NavIt 0.0.6
Fixed bug with alternating arrow buttons
added ability to use hover on top menu items in horizontal menu only and show buttons on children items
streamlined some of the code to make the process faster
Whats New for NavIt 0.0.5
Added Option to has alternating arrow button when showing child items
Whats New for NavIt 0.0.4
In the latest version we have fixed a couple of the bugs that were found when it
was used in a production website.
We have added in the ability to highlight the current page (only in the vertical
implementation) by passing in the id of the li that corrisponds to the current page.
This called HighlightedPage as is a string value
Doing this also made it apparent that the ugly ids given to the li's by NavIt made
it hard for developers to dictate which li to highlight and show.
So we have also added a property called OverRideId which is a bool
value, if set to true it will not over write the ids you have given your li's.
We have also fixed an alignment issue with links when the arrows are shown left
rather than the default right. Your hyperlinks should now show all nicely lined
up.
Horizontal Menu Sample
Sample Code
Markup
<ul id="HorizontalNavigationMenu">
<li><a href="/"
title="Where the hat lies">Home</a> </li>
<li><a href="/"
title="Speak to me">Contact</a> </li>
<li><a href="http://www.developmentbin.co.uk/"
title="The Development bin">The Blog</a></li>
<li><a href="/Projects/"
title="C#, jQuery, ASP.Net...">Projects</a>
<ul>
<li><a
href="/Projects/ASP.Net/" title="ASP.Net">ASP.Net</a></li>
<li><a
href="/Projects/jQuery/" title="jQuery">jQuery</a>
<ul>
<li><a
href="/Projects/jQuery/NavIt/" title="jQuery NavIt">NavIt</a></li>
<li><a
href="/Projects/jQuery/CenterIt/" title="jQuery CenterIt">CenterIt</a></li>
</ul>
</li>
<li><a
href="/Projects/Python/" title="Python">Python</a></li>
</ul>
</li>
<li><a href="/The_Fish/"
title="Where the hat lies">The Fish</a>
<ul>
<li><a
href="/The_Fish/" title="The Tanks">The Tanks</a></li>
<li><a
href="/The_Fish/" title="Corysdoras Catfish">Corysdoras</a></li>
</ul>
</li>
<li><a href="/Archive/"
title="Where the hat lies">Archive</a></li>
</ul>
Script
$('#verticalNavigationMenu').NavIt();
Live Demo
Vertical Menu Sample
Sample Code
Markup
<ul id="verticalNavigationMenu">
<li><a href="/"
title="Where the hat lies">Home</a> </li>
<li><a href="/"
title="Speak to me">Contact</a> </li>
<li><a href="http://www.developmentbin.co.uk/"
title="The Development bin">The Blog</a></li>
<li><a href="/Projects/"
title="C#, jQuery, ASP.Net...">Projects</a>
<ul>
<li><a
href="/Projects/ASP.Net/" title="ASP.Net">ASP.Net</a></li>
<li><span>jQuery</span>
<ul>
<li><a
href="/Projects/jQuery/NavIt/" title="jQuery NavIt">NavIt</a></li>
<li><a
href="/Projects/jQuery/CenterIt/" title="jQuery CenterIt">CenterIt</a></li>
</ul>
</li>
<li><a
href="/Projects/Python/" title="Python">Python</a></li>
</ul>
</li>
<li><a href="/The_Fish/"
title="Where the hat lies">The Fish</a>
<ul>
<li><a
href="/The_Fish/" title="The Tanks">The Tanks</a></li>
<li><a
href="/The_Fish/" title="Corysdoras Catfish">Corysdoras</a></li>
</ul>
</li>
<li><a href="/Archive/"
title="Where the hat lies">Archive</a></li>
</ul>
Script
$('#HorizontalNavigationMenu').NavIt({ IsVerticalNav: false });
Live Demo