├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── docs ├── index.html ├── scripts │ ├── main.js │ ├── priority-nav-scroller-umd.js │ └── priority-nav-scroller.js └── styles │ ├── priority-nav-scroller.css │ └── site.css ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── index.html ├── scripts ├── main.js ├── priority-nav-scroller-umd.js └── priority-nav-scroller.js └── styles ├── priority-nav-scroller.scss ├── priority-nav-scroller ├── _priority-nav-scroller-variables.scss └── _priority-nav-scroller.scss ├── site.scss └── site ├── _normalize.scss └── _site.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # trim_trailing_whitespace = true NIGEL TO DO - Needed??? 12 | 13 | indent_style = space 14 | indent_size = 2 15 | 16 | # Matches multiple files with brace expansion notation 17 | # Set default charset 18 | [*.{js,html}] 19 | charset = utf-8 20 | 21 | # 2 space indentation 22 | [*.{js,html,css,scss}] 23 | indent_style = space 24 | indent_size = 2 25 | 26 | # Tab indentation (no size specified) 27 | [Makefile] 28 | indent_style = tab 29 | 30 | # Indentation override for all JS under lib directory 31 | [lib/**.js] 32 | indent_style = space 33 | indent_size = 2 34 | 35 | # Matches the exact files either package.json or .travis.yml 36 | [{package.json,.travis.yml}] 37 | indent_style = space 38 | indent_size = 2 39 | 40 | # Markdown files 41 | [*.md] 42 | trim_trailing_whitespace = false 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Compiled output 5 | /dist 6 | /.tmp 7 | /zip 8 | 9 | # System Files 10 | .DS_Store 11 | Thumbs.db 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Nigel O Toole 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Priority Nav Scroller 2 | 3 | ### 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. 4 | 5 | ### [View demo](http://nigelotoole.github.io/priority-nav-scroller/) 6 | 7 | 8 | 9 | ## Installation 10 | ```javascript 11 | $ npm install priority-nav-scroller --save-dev 12 | ``` 13 | 14 | 15 | ## Usage 16 | 17 | ### Import JS 18 | 19 | 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. 20 | 21 | ```javascript 22 | import PriorityNavScroller from './priority-nav-scroller.js'; 23 | 24 | // Init with default setup 25 | const priorityNavScrollerDefault = PriorityNavScroller(); 26 | 27 | // Init with all options at default setting 28 | const priorityNavScrollerDefault = PriorityNavScroller({ 29 | selector: '.nav-scroller', 30 | navSelector: '.nav-scroller-nav', 31 | contentSelector: '.nav-scroller-content', 32 | itemSelector: '.nav-scroller-item', 33 | buttonLeftSelector: '.nav-scroller-btn--left', 34 | buttonRightSelector: '.nav-scroller-btn--right', 35 | scrollStep: 80 36 | }); 37 | 38 | // Init multiple nav scrollers with the same options 39 | let navScrollers = document.querySelectorAll('.nav-scroller'); 40 | 41 | navScrollers.forEach((currentValue, currentIndex) => { 42 | PriorityNavScroller({ 43 | selector: currentValue 44 | }); 45 | }); 46 | ``` 47 | 48 | 49 | ### Options 50 | | Property | Default | Type | Description | 51 | | --------------------- | -------------------------- | ------------- | ------------------------------------------------------------------------ | 52 | | `selector` | '.nav-scroller' | String/Node | Container element selector. | 53 | | `navSelector` | '.nav-scroller-nav' | String | Item element selector. | 54 | | `contentSelector` | '.nav-scroller-content' | String | Content element selector. | 55 | | `itemSelector` | '.nav-scroller-item' | String | Item element selector. | 56 | | `buttonLeftSelector` | '.nav-scroller-btn--left' | String | Left button element selector. | 57 | | `buttonRightSelector` | '.nav-scroller-btn--right' | String | Right button element selector. | 58 | | `scrollStep` | 80 | Number/String | Amount to scroll on button click. 'average' gets the average link width. | 59 | 60 | 61 | ### Import SASS 62 | 63 | ```scss 64 | @import "node_modules/priority-nav-scroller/src/styles/priority-nav-scroller.scss"; 65 | ``` 66 | 67 | 68 | ### Markup 69 | 70 | ```html 71 |
72 | 73 | 81 | 82 | 85 | 86 | 89 | 90 |
91 | ``` 92 | 93 | 94 | 95 | ### Using other tags 96 | 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. 97 | 98 | ```html 99 |