Naver

A jQuery plugin for responsive navigation.

Current Version: 3.1.0


Documentation Demo

Installation

Include the following resources on your page before initializing:

<script src="jquery.fs.naver.js"></script>
<link href="jquery.fs.naver.css" rel="stylesheet">

Bower

You can deploy and update via the command line with Bower:

bower install Naver

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set custom options for a specific instance by attaching a data-boxer-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
customClass string '' Class applied to instance
label boolean true Display handle width label
labels.closed string 'Navigation' Closed state text
labels.open string 'Close' Open state text
maxWidth string '980px' Width at which to auto-disable plugin

Events

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

Option Description
open.naver Navigation opened
close.naver Navigation closed

Methods

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

close

Closes instance

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

defaults

Sets default plugin options

$.naver("defaults", opts);
Parameter Type Default Description
opts object {} Options object

disable

Disables instance

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

destroy

Destroys instance

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

enable

Enables instance

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

open

Opens instance

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

Basic

Naver will automatically turn a basic navigation system into a mobile friendly system:

$("nav").naver();
<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
</nav>
Demo

Breakpoint

By default, Naver will enable itself on screens smaller then 980 pixels wide. You can specify a different width by setting the maxWidth option on initialization.

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

IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).