» Publicación:
31 diciembre 2010
/
Categoría:

Crear un sitio navegable por completo en una sóla página

Hace unos dias en Twitter comente que habia aprendido a usar un nuevo efecto realizado gracias a un jQuery. Esta vez el tutorial que tengo aquí, es para crear un sitio navegable por completo en una sóla página, todo esto de todas formas modificable y rediseñable gracias a el CSS.

Aunque la realidad de el CSS de este Script, trata de definir secciones de una misma página, colocarlas una debajo de otra y crear un menú que sirva de atajo. Esto es posible con jQuery. Ahora para poder ver la demo de lo que estoy hablando miren:

El primer paso es bajar jQuery-One-Page-Nav quien se encarga del trabajo del “ancla” y ordenar todo el contenido. Pero no solo eso este “pack” contiene todo incluyendo jQuery y jQuery ScrollTo, que permitirá que el efecto scroll se vea suave y no resulte entrecortado. Aunque en el punto del jQuery siempre recomiendo bajar la última versión del sitio web de jQuery.com.

Ahora vamos al HTML tras el <Body> agregamos lo siguiente:

Tras esto es necesario llamar unas pequeñas funciones de nuestro plugin:


Ahora vamos por el código CSS de estilos (que no quise pegarlo antes porque primero prefeferia que empezar a bajar los Script, aunque para algunos piensan que esto deberia ir primero).

Ahora vamos al HTML:

El resultado de todo esto es:

Por si fuera poco, este plugin permite algunas opciones de configuración extras. Para ello, debes editar el archivo y modificar las siguientes lineas:

currentClass: ‘current’
Agregar clase a un item de la lista, cuando el item de navegación está seleccionado.

changeHash: false
Si quieres que el hash cambie cuando el usuario haga clic en una opción de la lista de navegación, reemplázalo por “true”.

scrollSpeed: 750
Aquí puedes definir la velocidad con la que la página descenderá o ascenderá cuando una opción de la lista de navegación sea cliqueada.

  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Gravatar
Maflays

Buenas!!

Muy buen articulo, muchas gracias, una pregunta este mismo efecto se podria hacer hacia arriba?

Fecha del comentario: 22 octubre 2013 a las 17:06

Asi es…. por ejemplo de poner el menu más abajo.

Fecha del comentario: 22 octubre 2013 a las 17:22
Gravatar
Web999

excelente articulo solo que falta el download del articulo, no todo es a pedir de mano.

Fecha del comentario: 2 noviembre 2013 a las 16:14
Escribe tú comentario
*
*
» Mensaje: