One page Navigation jQuery plugin
Cuando tenemos que mostrar páginas con abundancia de texto podemos crear fácimente con el plugin jQuery One Page Navigation Plugin un menú de navegación para ir directamente a las secciones.
Se trata de una solución para crear enlaces a distintas partes del contenido de una página web.
Esto nos podría ser útil por ejemplo cuando queremos implementar la visualización de un libro online en HTML o pensando en tiendas virtuales, las páginas de aviso legal o condiciones selen ser grandes textos con titulares que podríamos seccionar.
En nuestro <body> deberemos crear el menú de navegación:
<ul id="nav"> <li><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li><a href="#section-3">Section 3</a></li> <li><a href="#section-4">Section 4</a></li> <li><a href="#section-5">Section 5</a></li> </ul>
Después tendremos las secciones identificadas de la siguiente forma:
<div id="section-1">
<strong>Section 1</strong>
...
</div>
Al final de nuestro <body>, antes de la etiqueta de cierre </body> añadiremos los scripts necesarios:
<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav({
begin: function() {
console.log('start')
},
end: function() {
console.log('stop')
}
});
});
</script>
El plugin y ejemplo lo puedes descargar de aquí.
Te ha servido? Valora esta entrada!
Autor
Deja una respuesta