Jump-nav NPM | npm.io

jump-nav

Generates jump navigation from jQuery objects.

Include directly in the header:

<script src="path/to/jquery.jump-nav.js"></script>

Include via npm/yarn:

$ npm install --save jump-nav

require('jump-nav');

Add before the closing body tag:

<script>
	$('nav#jump').jumpNav({
		sections: $('.jump-nav-section')
	});
</script>

See an example.

Option	Default	Description
classNav	'jump-nav'	Class that should be used for the element created with templateNav
classNavItem	'jump-nav-item'	Class that should be used for the element created with templateNavItem
classNavItemActive	'jump-nav-item-active'	Class to be applied to the nav item when it is the active jump link
classNavItemLink	'jump-nav-item-link'	Class that should be used for the element created with templateNavLink
classNavItemLinkActive	'jump-nav-item-link-active'	Class to be applied to the nav item link when it is the active jump link
dataSectionName	'jump-name'	Data attribute to use for the generated name
easing	'swing'	Type of easing to use when scrolling (see https://jqueryui.com/easing)
offset	0	Section offset to use when scrolling to and determining what section is active
sections	`$('.jump-nav-section')`	jQuery object containing the sections to jump to
speed	800	Speed of scroll when jumping
templateNav	`<ul class="{{class}}"></ul>`	Template to use when generating the parent nav element
templateNavItem	`<li class="{{class}}"></li>`	Template to use when generating the nav item element
templateNavItemLink	`<a href="{{href}}" class="{{class}}">{{name}}</a>`	Template to use when generating the nav item link element

Clone the repository

$ git clone git@github.com:firespring/jump-nav.git

Compile/transpile the jQuery plugin:

$ npm run build

Run local server (http://localhost:8888) and compile when changes are detected:

$ npm run dev

Licensed under the Apache License, Version 2.0: https://www.apache.org/licenses/LICENSE-2.0

5 years ago

5 years ago