Navegación lateral para sitio web de desplazamiento de una página-punto-NAV
| Autor: | piersrueb |
|---|---|
| Views Total: | 919 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 30, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca JavaScript DOT-NAV genera automáticamente una navegación lateral vertical para sitio web de desplazamiento de una página .
Al hacer clic en las viñetas de navegación, se desplaza suavemente por las secciones de la página con la ayuda de aceleración.
Funcionamiento
Descargue el zip e importe el archivo DOT-NAV-min. js en el documento.
<script src="dot-nav-min.js"></script>
Agregue secciones de página junto con la navegación de puntos a la Página Web.
<nav id="dot-nav"></nav> <section></section> <section></section> <section></section> <section></section> <section></section>
Inicialice el punto-NAV y especifique la función de aceleración que desea utilizar. Todas las funciones de aceleración disponibles:
- Lineal
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
dotNav('section', 'easeInOutCubic'); Aplique sus propios estilos a las viñetas de navegación.
nav#dot-nav {
position: fixed;
right: 20px;
top: 20px;
}
nav#dot-nav a {
border: 1px solid #121212;
border-radius: 50%;
width: 8px;
height: 8px;
display: block;
margin: 10px;
}
nav#dot-nav a.active, nav#dot-nav a:first-child {
background: #121212;
}
