Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NigelOToole/priority-nav-scroller
Javascript plugin for the priority+ navigation pattern.
https://github.com/NigelOToole/priority-nav-scroller
navigation priority-nav-scroller priority-navigation scroller scrolling vanilla-javascript vanilla-js
Last synced: 2 months ago
JSON representation
Javascript plugin for the priority+ navigation pattern.
- Host: GitHub
- URL: https://github.com/NigelOToole/priority-nav-scroller
- Owner: NigelOToole
- License: mit
- Created: 2018-05-18T14:33:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T18:26:23.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T16:26:15.475Z (3 months ago)
- Topics: navigation, priority-nav-scroller, priority-navigation, scroller, scrolling, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: http://nigelotoole.github.io/priority-nav-scroller/
- Size: 1.61 MB
- Stars: 210
- Watchers: 9
- Forks: 12
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Priority Nav Scroller
### Priority Nav Scroller is a plugin for the priority+ navigation pattern. When navigation items don’t fit on screen they are hidden and can be scrolled into view or using controls.
### [View demo](http://nigelotoole.github.io/priority-nav-scroller/)
## Installation
```javascript
$ npm install priority-nav-scroller --save-dev
```
## Usage
### Import JS
The script is an ES6(ES2015) module but the compiled version is included in the build as "src/scripts/priority-nav-scroller-umd.js". You can also copy "src/scripts/priority-nav-scroller.js" into your own site if your build process can accommodate ES6 modules.
```javascript
import PriorityNavScroller from './priority-nav-scroller.js';
// Init with default setup
const priorityNavScrollerDefault = PriorityNavScroller();
// Init with all options at default setting
const priorityNavScrollerDefault = PriorityNavScroller({
selector: '.nav-scroller',
navSelector: '.nav-scroller-nav',
contentSelector: '.nav-scroller-content',
itemSelector: '.nav-scroller-item',
buttonLeftSelector: '.nav-scroller-btn--left',
buttonRightSelector: '.nav-scroller-btn--right',
scrollStep: 80
});
// Init multiple nav scrollers with the same options
let navScrollers = document.querySelectorAll('.nav-scroller');
navScrollers.forEach((currentValue, currentIndex) => {
PriorityNavScroller({
selector: currentValue
});
});
```
### Options
| Property | Default | Type | Description |
| --------------------- | -------------------------- | ------------- | ------------------------------------------------------------------------ |
| `selector` | '.nav-scroller' | String/Node | Container element selector. |
| `navSelector` | '.nav-scroller-nav' | String | Item element selector. |
| `contentSelector` | '.nav-scroller-content' | String | Content element selector. |
| `itemSelector` | '.nav-scroller-item' | String | Item element selector. |
| `buttonLeftSelector` | '.nav-scroller-btn--left' | String | Left button element selector. |
| `buttonRightSelector` | '.nav-scroller-btn--right' | String | Right button element selector. |
| `scrollStep` | 80 | Number/String | Amount to scroll on button click. 'average' gets the average link width. |
### Import SASS
```scss
@import "node_modules/priority-nav-scroller/src/styles/priority-nav-scroller.scss";
```
### Markup
```html
```
### Using other tags
The demos use a <div> for "nav-scroller-content" and <a> tags for the "nav-scroller-item" but you can also use a <ul> as below.
```html