Navigation Demo

View Documentation

Basic

By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active.

Menu
<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();

No Max

Menu
<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"
});

No Theme

Menu
<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({
	theme: ""
});

Off Canvas - Overlay Left

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "overlay",
	gravity: "left",
	maxWidth: "10000px"
});

Off Canvas - Overlay Right

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "overlay",
	gravity: "right",
	maxWidth: "10000px"
});

Off Canvas - Reveal Left

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "reveal",
	gravity: "left",
	maxWidth: "10000px"
});

Off Canvas - Reveal Right

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "reveal",
	gravity: "right",
	maxWidth: "10000px"
});

Off Canvas - Push Left

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "push",
	gravity: "left",
	maxWidth: "10000px"
});

Off Canvas - Push Right

<div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>
$(".navigation").navigation({
	type: "push",
	gravity: "right",
	maxWidth: "10000px"
});
© 2017 Formstone