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.

Navi.js Content Switcher

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>

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
 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
Related post:  timeDropper - A beautiful & better UI timepicker

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.

Divi WordPress Theme

You may also like...

3 Responses

  1. moli says:

    Can images be displayed in pages? I tried and failed.

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close