jump-nav

Generates jump navigation from jQuery objects.

Dependencies

• jQuery
• (optional) jQueryUi - For more easing options

Getting Started

1. Include directly in the header:

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

2. Include via npm/yarn:

   $ npm install --save jump-nav

   require('jump-nav');

Usage

Add before the closing body tag:

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

See an example.

Options

| 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 |

Contributing

1. Clone the repository

   $ git clone [email protected]:firespring/jump-nav.git

2. Install dependencies

   $ npm install

Commands

Compile/transpile the jQuery plugin:

$ npm run build

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

$ npm run dev

License

Copyright 2019 Firespring, Inc.

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