Submit your widget

Naver Demo - A jQuery plugin for responsive navigation

Created 6 years ago   Views 33364   downloads 5554    Author benplum
Naver Demo - A jQuery plugin for responsive navigation
View DemoDownload
89
Share |

Naver is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle.

Usage

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" type="text/css" media="all" />

Bower

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

bower install Naver

Implimentation

Simply target the existing navigation system when initializing:

<nav class="navigation">
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
</nav>
$(".navigation").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-naver-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");