Navigation

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<h5 class="nav_handle">Menu</h5>
<nav class="navigation" data-navigation-handle=".nav_handle">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>

$(".navigation").navigation({
  maxWidth: "10000px"
});

Using Navigation

Main

navigation.js
navigation.css

Dependencies

jQuery
core.js
mediaquery.js
swap.js

Basic

Navigation will automatically turn a basic navigation into a mobile friendly system. Links can be styled independently:

$("nav").navigation();

<h4 id="handle">Navigation</h4>
<nav data-navigation-handle="#handle">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Breakpoint

By default, Navigation will enable itself on screens smaller then 980 pixels wide. Specify a different width by setting the maxWidth option on initialization.

$("nav").navigation({
  maxWidth: "740px"
});

Off Canvas

Navigation can also slide out from the left or right hand side of the screen. The nav can 'push' the main page content by specifying the data-navigation-content attribute:

$("nav").navigation();

<h4 id="handle">Navigation</h4>
<nav data-navigation-handle="#handle" data-navigation-content="#content">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
<div id="content">
  ...
</nav>

Events

React to the navigation by listening for the open.navigation and close.navigation events:

$("nav").on("open.navigation", function() {
  // ...
}).on("close.navigation", function() {
  // ...
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-navigation-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

close

Closes instance.

$(".target").navigation("close");

defaults

Extends plugin default settings; effects instances created hereafter.

$.navigation("defaults", { ... });

Parameters

destroy

Removes plugin instance.

$(".target").navigation("destroy");

disable

Disables instance.

$(".target").navigation("disable");

enable

Enables instance.

$(".target").navigation("enable");

open

Opens instance.

$(".target").navigation("open");

CSS