Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller

Category: Javascript , Menu & Navigation | November 19, 2018
Author:NigelOToole
Views Total:1,935 views
Official Page:Go to website
Last Update:November 19, 2018
License:MIT

Preview:

Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller

Description:

Priority Nav Scroller is a pure JavaScript plugin to create a fully responsive, arbitrarily-prioritized navigation menu following the Priority+ Navigation pattern.

The plugin automatically cuts your long navigation menu with navigation controls when there is not enough space to display the full menu items (e.g. on mobile devices).

The visitors are allowed to scroll through all the menu items with the left/right navigation arrows.

See also:

How to use it:

Install the Priority Nav Scroller with NPM.

# NPM
$ npm install priority-nav-scroller  --save

Import the Priority Nav Scroller into your project.

import PriorityNavScroller from './priority-nav-scroller.js';

Create a normal navigation menu with navigation buttons on the page.

<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>
      <a href="#" class="nav-scroller-item">Item 4</a>
      <a href="#" class="nav-scroller-item">Item 5</a>
      ...
    </div>
  </nav>
  <button class="nav-scroller-btn nav-scroller-btn--left">
    &lt;
  </button>
  <button class="nav-scroller-btn nav-scroller-btn--right">
    &gt;
  </button>
</div>

Initialize the Priority Nav Scroller and done.

const myNav = PriorityNavScroller();

Default selectors of the Priority Nav Scroller.

const myNav = 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'
});

Set the step size in pixels.

const myNav = PriorityNavScroller({
      scrollStep: 75
});

Changelog:

11/19/2018

  • Add CSS scroll snap points option

You Might Be Interested In:


Leave a Reply