SmoothTabs: Pestañas con mootools
Publicada el 06/05/2008 a las 01:05 y leída 1450 veces. 
Traducir ao galego.
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].
SmoothTabs - Mootools based page transitions
