Download
User Rating: 0/5 ( 0 votes)
Why Navi?
Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all of your html code for multiple pages in one file. Navi leverages the hashchange event to change content based on the current hash, or falls back to Ben Alman's hashchange plugin to allow the use of the back button functionality.
New Animations
Navi.js is now supercharged with extra animations to make page changes even more appealing. Navi now has new animations to choose from. Just include animate.css into the head of your document!
Using Ajax?
As of version 1.8, Navi now supports loading content via AJAX for those who want this functionality.
Notice
Navi.js will resume support for multiple sections / nested content in the next version.
Features
-
Ajax Support New
-
Google Analytics Support New
-
Change page title to reflect content
-
Breadcrumbs Support
-
Back/Forward Button Support
-
Easy HTML/JS markup
-
Use any hash
-
Can write multiple pages in one file
-
Animations between changes:
-
Slide Up
-
Slide Left
-
Slide Up-Left
-
Fade
-
Rotate Out-Down-Left
-
Bounce Out-Down
-
Bounce Out
-
Light Speed
-
Roll
-
Flip-X
-
Flip-Y
-
More in 2.0
Markup
HTML
<nav id='naviMenu'>
<ul>
<li class="active"> <a href='#!/page1'>Page1</a> </li>
<li> <a href='#!/page2'>Page2</a> </li>
<li> <a href='#!/page3'>Page3</a> </li>
</ul>
</nav>
<section id='naviContent'>
<ul>
<li id='page1'> Content for page 1 here </li>
<li id='page2'> Content for page 2 here </li>
<li id='page3'> Content for page 3 here </li>
</ul>
</section>
The markup to use this plugin is very simple. Just setup a container for both the menu and the content. Inside the menu container, create a ul that contains an li for each page. The links are standard but make sure the href includes the hash you choose followed by the page name.
Example: <a href="hashPAGE">text</a>
TIP: Adding a class of .active to one of your menu's li will set this to the default page
Make sure that the container structure is the same for both the menu and the content. This plugin selects each container's ul > li. Now make sure that each of your content's li has an id of the page name (not including hash).
Example: <li id='PAGE'> Page content </li>
TIP: Using Ajax? just leave your content's li's empty!
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent")
});
Options
Defaults
jQuery.navi({
hash: "#!/", //Hash to use
content: $("#content"), //Associates content
contentSubSelector: ">ul>li", // Custom selector under content
activeClass: "active", // Set class for active content
defaultPage: true, //Is a default page defined?
useAnimation: true, //Animates content
animationSpeed: 100, //Animation speed in ms
animationType: "slideUp", //The default animation
usePageTitle: true, //Change page title?
defaultPageTitle: "Navi.js", //The base title for pages
useBreadCrumbs: true, // Add support for breadcrumbs
useAjax: true, // Use ajax to load content
ajaxExtension: ".html", // The extension of ajax pages
ajaxFolder: "./", // The folder where the ajax pages are
})
|
Option |
Type |
Description |
Version |
|
hash |
String |
Set this to whatever hash you please |
1.0 |
|
content |
jQuery Object |
The container of the content |
1.0 |
|
contentSubSelector |
String |
The selector that points to your pages under your content. |
1.9.1 |
|
activeClass |
String |
The class that gets loaded to the active content |
1.9 |
|
defaultPage |
Boolean |
Set true if you want a default page. Set one li in the menu to have a class of active |
1.0 |
|
useAnimation |
Boolean |
Set true if you want animation between changes |
1.0 |
|
animationType |
String |
Used to declare type of animation. |
1.2 |
|
animationSpeed |
Integer|String |
Sets speed of animation. Integer in miliseconds. String values ("slow","medium","fast") |
1.0 |
|
usePageTitle |
Boolean |
Changes the page title. Add data-title="Your page title" to each li in your menu |
1.1 |
|
defaultPageTitle |
String |
The default base of the page title |
1.1 |
|
useBreadCrumbs |
Boolean |
Set to true for breadcrumb support. |
1.5 |
|
useAjax |
Boolean |
Set to true to enable the use of ajax pages. Create a file named after each id. |
1.7 |
|
ajaxExtension |
String |
The extension of the files of the ajax pages to be loaded |
1.8 |
|
ajaxFolder |
String |
The path to where you have your ajax pages stored |
1.9 |
Page Titles
Markup
HTML
<nav id='naviMenu'>
<ul>
<li class="active" data-title=" - Page1">
<a href='#!/page1'>Page1</a>
</li>
<li data-title=" - Page2">
<a href='#!/page2'>Page2</a>
</li>
<li data-title=" - Page3">
<a href='#!/page3'>Page3</a>
</li>
</ul>
</nav>
<section id='naviContent'>
<ul>
<li id='page1'> Content for page 1 here </li>
<li id='page2'> Content for page 2 here </li>
<li id='page3'> Content for page 3 here </li>
</ul>
</section>
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent"),
usePageTitle: true,
defaultPageTitle: "My Site"
});
In order to use Navi to change the page title you just need to add the attribute data-title to each of your menu's li. Then just set the defaultPageTitle to what you want prepended before everydata-title.
BreadCrumbs
Markup
HTML
<div id="breadcrumbs">
<ul>
<li><a href="#!/Page1">Page1</a></li>
<li><a href="#!/Page2">Page2</a></li>
<li><a href="#!/Page3">Page3</a></li>
</ul>
</div>
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent"),
useBreadCrumbs: true,
});
Setting up breadcrumbs is now more easy to accomplish. Just set useBreadCrumbs to true, then Navi will find any links that point to the current hash, and then set the parent element to have the class as defined in activeClass
Ajax
Markup
HTML
<nav id='naviMenu'>
<ul>
<li class="active"> <a href='#!/page1'>Page1</a> </li>
<li> <a href='#!/page2'>Page2</a> </li>
<li> <a href='#!/page3'>Page3</a> </li>
</ul>
</nav>
<section id='naviContent'>
<ul>
<li id='page1'> Keep Empty </li>
<li id='page2'> Keep Empty </li>
<li id='page3'> Keep Empty </li>
</ul>
</section>
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent"),
useAjax: true,
ajaxExtension: ".html",
ajaxFolder: "./"
});
JS Tutorial
