SmoothTabs: Pestañas con mootools

6 mayo, 2008

SmoothTabs

SmoothTabs es un sistema de navegación mediante pestañas basado en mootools y que permite realizar transiciones entre diferentes secciones con un efecto muy profesional.

Para usarlo tan solo tenemos que incluir el archivo en la cabecera de nuestro HTML:
[HTML]

[/HTML]

Definir una lista con las distintas secciones a modo de menú:
[HTML]

  • Inicio
  • Portafolio
  • Contacto

[/HTML]

Y luego en bloques que se ocultarán automáticamente introducimos el contenido para cada sección:
[HTML]

Esta es la seccion inicial.

[/HTML]

Luego tan solo tendrás que aplicarle los estilos visuales más apropiados para el proyecto.

He publicado una pequeña prueba a modo de ejemplo y en la página oficial dispones de un ejemplo usando el script HistoryManager, que permite usar las teclas de página anterior y siguiente para moverte por las pestañas visitadas.

Yo ya lo estoy incluyendo en mi próximo tema para el blog [que saldrá en breve].

  • No tiene mala pinta. Es interesante lo que han hecho en la página oficial. Lo de ponerle enlaces con #anclas. De esta forma se conserva la usabilidad.
    Un saludo!

  • Jorge

    Esta interesante, la pregunta: como podría cargar páginas externas (html o php) dentro del div?, gracias

  • MELO

    Buenas Tarde quiero saber porque cuando subo los archivo al servidor el efecto no funciona

  • Elkin

    Pero existe un problema. cuando terminas con la ultima pestaña y refresca la pagina, el formulario de contacto se sale de contexto.

    ¿Cual sería la solución?

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.