All Projects → NigelOToole → Priority Nav Scroller

NigelOToole / Priority Nav Scroller

Licence: mit
Priority Nav Scroller is a plugin for the priority+ navigation pattern.

Projects that are alternatives of or similar to Priority Nav Scroller

jquery-scrollwatch
jQuery plugin for determining active sections on the page based on scrolling
Stars: ✭ 18 (-90.91%)
Mutual labels:  navigation, scrolling
Tlyshynavbar
Unlike all those arrogant UINavigationBar, this one is shy and humble! Easily create auto-scrolling navigation bars!
Stars: ✭ 3,780 (+1809.09%)
Mutual labels:  navigation, scrolling
angular-scrollspy
A simple lightweight library for Angular which automatically updates links to indicate the currently active section in the viewport
Stars: ✭ 34 (-82.83%)
Mutual labels:  navigation, scrolling
Jquery.localscroll
Animated anchor navigation made easy with jQuery
Stars: ✭ 624 (+215.15%)
Mutual labels:  navigation, scrolling
EasyScrollDots
Single page scroll JavaScript plugin that allows for vertical navigation of page sections
Stars: ✭ 38 (-80.81%)
Mutual labels:  navigation, scrolling
Gumshoe
A simple vanilla JS scrollspy script.
Stars: ✭ 640 (+223.23%)
Mutual labels:  navigation, scrolling
Horizontal Scroll
Horizontal scroll with inertia
Stars: ✭ 175 (-11.62%)
Mutual labels:  scrolling
Zeroshot Imitation
[ICLR 2018] TensorFlow code for zero-shot visual imitation by self-supervised exploration
Stars: ✭ 187 (-5.56%)
Mutual labels:  navigation
Marine Api
Java Marine API - NMEA 0183 library for Java
Stars: ✭ 174 (-12.12%)
Mutual labels:  navigation
Advio
An Authentic Dataset for Visual-Inertial Odometry
Stars: ✭ 170 (-14.14%)
Mutual labels:  navigation
Stickyfill
Polyfill for CSS `position: sticky`
Stars: ✭ 2,252 (+1037.37%)
Mutual labels:  scrolling
React Indiana Drag Scroll
React component which implements scrolling via holding the mouse button or touch
Stars: ✭ 190 (-4.04%)
Mutual labels:  scrolling
Md max72xx
LED Matrix Library
Stars: ✭ 186 (-6.06%)
Mutual labels:  scrolling
Onenav
使用PHP开发的简约导航/书签管理系统。
Stars: ✭ 160 (-19.19%)
Mutual labels:  navigation
Scroll Snap
↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
Stars: ✭ 187 (-5.56%)
Mutual labels:  scrolling
The Movie Db Kotlin
The Movie DB app using Kotlin with updated Android features
Stars: ✭ 176 (-11.11%)
Mutual labels:  navigation
Cicerone
🚦 Cicerone is a lightweight library that makes the navigation in an Android app easy.
Stars: ✭ 2,345 (+1084.34%)
Mutual labels:  navigation
Appear
execute callbacks when dom elements appear in and out of view
Stars: ✭ 172 (-13.13%)
Mutual labels:  scrolling
Infinitescroll
Infinite Scroll (Endless Scrolling) for RecyclerView in Android
Stars: ✭ 183 (-7.58%)
Mutual labels:  scrolling
Navigationtabstrip
Navigation tab strip with smooth interaction.
Stars: ✭ 2,234 (+1028.28%)
Mutual labels:  navigation

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

Installation

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

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

@import "node_modules/priority-nav-scroller/src/styles/priority-nav-scroller.scss";

Markup

<div class="nav-scroller">

  <nav class="nav-scroller-nav">
    <div class="nav-scroller-content">
      <a href="#" class="nav-scroller-item">Item 1</a>
      <a href="#" class="nav-scroller-item">Item 2</a>
      <a href="#" class="nav-scroller-item">Item 3</a>
      ...
    </div>
  </nav>

  <button class="nav-scroller-btn nav-scroller-btn--left">
    ...
  </button>

  <button class="nav-scroller-btn nav-scroller-btn--right">
    ...
  </button>

</div>

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.

<ul class="nav-scroller-content">
  <li class="nav-scroller-item"><a href="#" class="nav-scroller-item">Item 1</a></li>
  ...

The buttons use an svg for the arrow icon but this can be replaced with an image, text or html entities(< >, ← →, ◄ ►), just update the nav-scroller-button styles as needed.

Compatibility

Browser support

Supports all modern browsers(Firefox, Chrome and Edge) released as of January 2018. For older browsers you may need to include polyfills for Nodelist.forEach and Element.classList.

Demo site

Clone or download from Github.

$ npm install
$ gulp serve

Credits

A horizontal scrolling navigation pattern for touch and mouse with moving current indicator by Ben Frain.
A Priority+ Navigation With Scrolling and Dropdowns by Micah Miller-Eshleman on CSS-Tricks.
The Priority+ Navigation Pattern by Chris Coyier on CSS-Tricks.

License

MIT © Nigel O Toole

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].