Menú para navegación de página con Scroll mediante jQuery

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este ejemplo en jQuery puede ser muy útil cuando necesitamos crear un menú de navegación para páginas con mucho texto o contenido, ya que permite hacer scroll automático de la página a través de las secciones. Cuando hagamos clic en cada sección, esta quedará seleccionada automáticamente y se desplazará.

El plugin, que como se mencionó utiliza la librería jQuery, es completamente gratuito y de libre uso ( Open source con licencia MIT y GPL), y además muy fácil de implementar.

Mas información sobre el programa.

Descripción general.

En el fichero de descarga se incluyen varios archivos, entre ellos la librería jQuery y el fichero de demostración index.htm. (También puedes probarlo pulsando en este enlace.)

Funcionamiento e instalación:

La instalación e implementación es muy simple.

Cada item de menú es un elemento de lista UL/LI. el ID de la lista deberá establecerce con el valor Nav, por ejemplo:

Luego cada párrafo o sección de la página que corresponderá a las secciones definidas anteriormente, tendrán que tener en su atributo Class el valor section, y en el ID tendremos que colocar el enlace establecido en el atributo HREF de cada item del menú, por ejemplo:

Archivos dependientes.

En la sección Head de la página necesitarás colocar los siguientes archivos:

  • jquery.js
  • jquery.nav.js
  • jquery.nav.min.js
  • jquery.scrollTo.js

Modificar la velocidad del scroll.

Para configurar la velocidad de desplazamiento automático, lo puedes hacer abriendo el archivo javascript jquery.nav.js con el bloc de notas o tu editor de páginas web.

Dentro de este fichero, al final de todo, encontrarás el siguiente código fuente o bloque:

Allí simplemente modifica el valor 750 de la variable scrollSpeed con el que necesites utilizar.

 


Requerimientos de instalación y uso.

Requiere : librería jQuery


Videos tutoriales.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
flesler.blogspot.com
Licencia:
Gratis - Software libre
Versión:
1.0
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: