Navi.js – Content Switcher
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 Ben Alman’s hashchange plugin to change content based on the current hash. This allows the use of the back button functionality. Navi is also friendly with other plugins, and can be called on multiple objects or nested.
Navi was created to be an easy way for anyone wanting to change content. This plugin can help with the development of numerous other plugins including: tabs, pagination, image sliders, and others. Navi has serveral options to tweak and allows for loading content based on the page hash. You can call Navi on multiple elements with ease so you can have multiple content switching sections.
SEE THE EXAMPLES | DOWNLOAD
HTML
<nav id='naviMenu'> <ul> <li> <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>
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>
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent")
});
Options
Defaults
jQuery.navi({
hash: "#!/", //Hash to use
content: $("#content"), //Associates 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
breadCrumbsContent: $("#breadcrumbs"), // Breadcrumbs container
useAjax: true, // Use ajax to load content
ajaxExtension: ".html", // The extension of ajax pages })
| Type | Description | Version |
|---|---|---|
| String | Set this to whatever hash you please | 1.0 |
| jQuery Object | The container of the content | 1.0 |
| Boolean | Set true if you want a default page. Set one li in the menu to have a class of active |
1.0 |
| Boolean | Set true if you want animation between changes | 1.0 |
| String | Used to declare type of animation. Possible values (“slideUp”,”fade”,”slideLeft”,”slideUpLeft”) | 1.2 |
| Integer|String | Sets speed of animation. Integer in miliseconds. String values (“slow”,”medium”,”fast”) | 1.0 |
| Boolean | Changes the page title. Add data-title="Your page title" to each li in your menu |
1.1 |
| String | The default base of the page title | 1.1 |
| jQuery Object | Set this to be the container for breadcrumbs content | 1.5 |
| Boolean | Set to true for breadcrumb support. Add data-page="pageName" to each li in your markup. |
1.5 |
| Boolean | Set to true to enable the use of ajax pages. Create a file named after each id. |
1.7 |
| String | The extension of the files of the ajax pages to be loaded | 1.8 |
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 data-page="page1"><a href="#!/Page1">Page1</a></li> <li data-page="page2"><a href="#!/Page2">Page2</a></li> <li data-page="page3"><a href="#!/Page3">Page3</a></li> </ul> </div>
JS
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent"),
useBreadCrumbs: true,
breadCrumbsContent: $("#breadcrumbs")
});
Setting up breadcrumbs is very to do. Add the data-page to each li located under your defined container. Then simply set useBreadCrumbs to true and then set breadCrumbsContent to the selecter of the container.
Can images be displayed in pages? I tried and failed.
Hi Moli,
I will check it and get back to you!
Thank you, more specifically and sorry about the confusion, I would like to dynamically load images via PHP to a page. Thank you!