06/05SmoothTabs: Pestañas con mootools
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:
-
<script src=“Smoothtabs.js” type=“text/javascript”></script>
Definir una lista con las distintas secciones a modo de menú:
Y luego en bloques que se ocultarán automáticamente introducimos el contenido para cada sección:
-
<div id=“content” class=“smoothtabs”>
-
<div id=“inicio-data” class=“smoothtab-current”>
-
<p>Esta es la seccion inicial.</p>
-
</div>
-
<div id=“portafolio-data” class=“smoothtab” style=“display:none”>
-
<p>Esta es la seccion de portafolio.</p>
-
</div>
-
<div id=“contacto-data” class=“smoothtab” style=“display:none”>
-
<p>Esta es la seccion de contacto.</p>
-
</div>
-
</div>
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.
responder »Un saludo!
Tonic
6/05/08 @ 13:41
comentarios recientes
Esta interesante, la pregunta: como podría cargar páginas externas (html o php) dentro del div?, gracias
responder »Jorge
7/08/08 @ 15:23
comentarios recientes