La motivación fue hacer un site similar a:
Revisando believein (pude bajar el site usando wget, Firebug y un poco de paciencia), me resultaba un poco difícil encontrar la clave del comportamiento que veía.
Encontré una aproximación en Curtain.js. Sin embargo, cuando requería modificar la presentación, también me resultaba un poco difícil encontrar dónde hacerla.
Decidí reinventar la rueda de este caso, para tratar de comprender las ideas del proceso de solución.
Los sites que revisé me dieron pistas.
Simple HTML
- Todo el contenido está presente en el mismo documento.
- El contenido se divide en secciones a las que denomino pages.
- Cada page es el destino de un link del menú. Esto permite una navegación simple a enlaces internos.
Aplicando estilos básicos:
index.html
style.css
Nav fixed
- Se fijan los elementos de navegación: cabecera y menú.
En simple_html, estaban dentro de page-0 (para permitir ver el menú cuando se fuera a HOME). Como ahora serán siempre visibles, eso no es necesario.
- Se implementa un indicador de posición, que señale en el menú la página activa.
- En el menú, aparece resaltado el link a.active
- El link se activa si el url cambia
- El url cambia
- cuando se ingresa a mano
- cuando se hace click en un enlace del menú
- cuando se hace scroll
- El plugin address permite responder ante un cambio del url.
style.css
script.js
Scrollto
- Scroll animado suave.
index.html
style.css
script.js
(continuará...)
No hay comentarios.:
Publicar un comentario