Easy Content Switching Plugin with jQuery - Navi.js

Navi.js is an awesome jQuery plugin for displaying contents of multiple pages with sliding and fade effects in one page.

Basic Usage:

1. Markup HTML Structure

<nav id="navi">
  <ul>
    <li><a href="#!/home">Home</a></li>
    <li><a href="#!/about">About</a></li>
    <li><a href="#!/services">Services</a></li>
    <li><a href="#!/contact">Contact</a></li>
  </ul>
</nav>

<section id="naviContent">
  <ul>
    <li id="home">Content Here </li>
    <li id="about">Content Here </li>
    <li id="services">
      <nav id="nestedNavi">
        <ul>
          <li class="active"><a href="#!/services/repair">Repair</a></li>
          <li><a href="#!/services/coding">Coding</a></li>
          <li><a href="#!/services/virus">Virus Removal</a></li>
        </ul>
      <nav>
      <section id="nestedContent">
        <ul>
          <li id="repair">Repair Content</li>
          <li id="coding">Coding Content</li>
          <li id="virus">Virus Removal Content</li>
        </ul>
      <section>
    </li>
    <li id="contact">Content Here </li>
  </ul>
</section>

2. Include jQuery library and Navi.js on your page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="navi.js"></script>

3. Initialize the plugin

&("#navi").navi({
  hash: "#!/",
  content: $("#naviContent"),
  usePageTitle: false, 
  animationType: "slideUp",
  animationSpeed: 400 
})
$("#nestedNavi").navi({
  hash: "#!/services/",
  content: $("#nestedContent"),
  usePageTitle: false,
  useAnimation: false
})

4. More Options

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
})

More Examples:

• 2 menus different hashes
• 2 menus same hash
• Nested Content 1
• SlideUp
• SlideLeft
• SlideUpLeft
• Fade

Change Log:

v1.9.1 (2013-07-15)

• Allows custom selector for content

v1.9.0 (2013-05-29)

• New Animations, Removed Unnessesary code

v1.8.0 (2013-03-06)

• Ajax Support
• Google Analytics Support

---

This awesome jQuery plugin is developed by grant54. For more Advanced Usages, please check the demo page or visit the official website.