menudas horas! es que al estar mi chiquilla aquí no me quiero ir para cama...

Estas filtrando por la etiqueta:

"pestañas"

↑↓

06/05SmoothTabs: Pestañas con mootools

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:

Ver Texto Plano
HTML:
  1. <script src=“Smoothtabs.js” type=“text/javascript”></script>

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

Ver Texto Plano
HTML:
  1. <ul class=“smoothtabs-menu”>
  2.     <li id=“inicio-current”>Inicio</li>
  3.     <li id=“portafolio”>Portafolio</li>
  4.     <li id=“contacto”>Contacto</li>
  5. </ul>

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

Ver Texto Plano
HTML:
  1. <div id=“content” class=“smoothtabs”>
  2.     <div id=“inicio-data” class=“smoothtab-current”>
  3.       <p>Esta es la seccion inicial.</p>
  4.     </div>
  5.     <div id=“portafolio-data” class=“smoothtab” style=“display:none”>
  6.       <p>Esta es la seccion de portafolio.</p>     
  7.     </div>
  8.     <div id=“contacto-data” class=“smoothtab” style=“display:none”>
  9.       <p>Esta es la seccion de contacto.</p>     
  10.     </div>
  11.  </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

1 Comentario

diseño, pestañas, Javascript, desarrollo web

extras

buscador

borrar

tags

archivo

comentarios

lo + comentado

  • 20# - Todo en Uno v.7 Hoy he acabado de bajarme el DVD Todo en Uno v.7. En cuanto lo pruebe os comentare que tal esta [tiene buena pinta]. Copio y pego de la pagina del au...
  • 11# - Nuevo plugin para Wordpress: NoIE Partiendo de la idea de juntar a todos los desarrolladores web y realizarle un boicot al navegador de Microsoft, he desarrollado un pequeño plugin pa...
  • 10# - Kamelo Punto Semos: Jonathan Kamelo Punto Semos es el grupo formado por estos dos personajes y que se definen como "rumba-pop". Han dado el salto a la fama con su aparicion en el ...
  • 9# - mBox, mi nuevo plugin para WP Por fin me han habilitado la cuenta en Wordpress Extend y os puedo presentar mi nuevo plugin. mBox es un plugin que permite incluir presentaciones ...
  • 8# - Ya tengo un Asus EEE PC 900 ¡Por fin me ha llegado el Asus EEE PC 900 que tenia encargado! Apenas he podido trastear algo con el pero os comento las primeras impresiones [aunque...

flickr

El RavalESCAuditoriumSiesta, Typical SpanishSit Down