Siempre estoy escribiendo sobre lo sencillo que es implementar una galería de imágenes, tooltips, menús y demás con jQuery. Hoy voy a escribir sobre lo sencillo que es desplazar de contenido con un plugin jQuery.
Se trata de jQuery One Page Navigatio Plugin, una solución para crear enlaces a distintas partes del contenido de una página web.
Implementación
Primero necesitamos enlazar las bibliotecas Javascript:
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script> <script src="jquery.nav.min.js"></script>
Segundo crear la estructura HTML que luego luego paginaremos:
El menú:
<ul id="nav"> <li class="current"><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> </ul>
El contenido a desplazar:
<div id="section-1"> <strong>Section 1</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-2"> <strong>Section 2</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-3"> <strong>Section 3</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
El plugin además ofrece opciones para personalizar le comportamiento, por ejemplo:
- currentClass: ‘current’ – Define el elemento seleccionado por defecto.
- scrollSpeed: 750 – Define la velocidad de desplazamiento.
jQuery One Page Navigation Plugin
Sitio: trevordavis.net/blog/jquery-one-page-navigation-plugin
Hola Horacio.
Mira hay demo en esta dirección. El ejemplo es un traducción libre de un post en inglés. Al final del post está la entrada.
Saludos.
Puedo sugerir que pongas un DEMO???