Javascript

【Javascript】ナビゲーションアイテムが画面に収まらない場合に水平スクロール可能なコンテナに隠されるPriority Nav Scroller

June 24, 2018
Priority Nav Scroller

Priority Nav Scrollerはナビゲーションアイテムが画面に収まらない場合、コントロールを持つ水平スクロール可能なコンテナに隠されるナビゲーションプラグイン。

Usage

import PriorityNavScroller from 'priority-nav-scroller';

// 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: 75
});

// Init multiple nav scrollers with the same options
let navScrollers = document.querySelectorAll('.nav-scroller');

navScrollers.forEach((currentValue, currentIndex) => {
  PriorityNavScroller({
    selector: currentValue
  });
});

Options

  1. selector
  2. navSelector
  3. contentSelector
  4. itemSelector
  5. buttonLeftSelector
  6. buttonRightSelector
  7. scrollStep

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" aria-label="Scroll left">
    ...
  </button>

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

</div>

MIT