Prioridad de respuesta desplazable + navegación en JavaScript puro-prioridad NAV scroller

Vista prévia

Descripción

Priority NAV Scroller es un plugin de JavaScript puro para crear un menú de navegación totalmente adaptable y con prioridad arbitraria siguiendo el Priority + Patrón de navegación .

El plugin corta automáticamente su menú de navegación larga con controles de navegación cuando no hay suficiente espacio para mostrar los elementos del menú completo (por ejemplo, en dispositivos móviles).

Los visitantes pueden desplazarse por todos los elementos del menú con las flechas de navegación izquierda/derecha.

See also:

• navegación de desplazamiento adaptable en JavaScript â & #128; & #147; barra de Bungie
• navegación adaptable con prioridad arbitraria de jQuery

Funcionamiento

Instale la prioridad NAV scroller con NPM.

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

Importe la prioridad NAV scroller en su proyecto.

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

Cree un menú de navegación normal con los botones de navegación en la página.

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

Inicializa la prioridad NAV Scroller y listo.

const myNav = PriorityNavScroller();

Selectores por defecto de la prioridad 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'
});

Establezca el tamaño del paso en píxeles.

const myNav = PriorityNavScroller({



scrollStep: 75
});

Registro de cambios

11/19/2018

• Agregue la opción de puntos de referencia de desplazamiento CSS