» Publicación:
4 septiembre 2010
/
Categoría:

Haciendo Tabs de navegación con Easy Tabs

Hoy nuevamente me vi en la necesidad de buscar un buen “Tabs de Navegación”, que sea simple y que funcionará en la mayoría de los navegadores. Buscando y buscando, no topaba con ninguno que no pisara con algun JQuery que tenia en un proyecto. Finalmente me recomendaron “Easy Tabs”, lo mire con cierto desprecio, ya que el nombre es de los tipicos nombre como “Fantasic Tab”, “TabsPro Revolution Mega Hyper” que no me dan confianza. Coloque el código y su funcionamiento de inmediato excepcional, rápido en carga y con solo un JavaScript y un CSS.

Easy Tabs fue creado por Kollermedia.at y su versión más estable es la versión 1.1, y a continuación enumerare sus grandes beneficios.

– Es gratis tanto como para proyectos personales como comerciales.
Probado con éxito en IE5.0, IE5.5, IE6, IE7, Firefox 2, Firefox 3.5, Chrome 4, Chrome 5, Opera 9.2.
– Fácil de maniobrar en su CSS y rediseñar completamente.
– Puedes agregar tantos tabmenus, como requiera tu sitio en un sitio.
– En los ejemplos que he empaquetado todo (HTML, CSS, Javascript) en un archivo – pero también se puede poner el CSS en un archivo CSS externo y javascript en un archivo javascript externo.
– Atención: Si el javascript en el navegador está deshabilitado – todos “contentboxes” (cajas contenedoras) son visibles.

Ahora vamos a ver como se instala y como podemos modificarlo para un mejor funcionamiento (dependiendo del caso de Diseño que deseen):

1. Descargar el Script (Easy Tabs 1.1) de manera gratuita.

2. Al descomprimirlo veremos lo facil que es, solo hay tres archivos; un HTML, un CSS y el JS (JavaScript) y abrimos la ver Demo por Defecto. Y podemos ver que en su antes de su termino del <Head> esta el siguiente código:

3. Al ver la demo del tabs por defecto, el código por defecto ocupa un Hover (que al pasar el mouse por encima cambia el tab), esto es debido a este código:

Si aplicamos el siguiente cambio de código dejara de funcionar por medio de un Hover, y pasa a ser funcionable por medio de un Click.

El resultado de esta modificación es la siguiente: Ver DEMO con Click

  • 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

Interesante.. aunque tengo un trataría de buscar una opción no intrusiva. Con Jquery o Mootools podrías realizar algo similar o mejor sin tener que echar mano al html.

saludos.

Fecha del comentario: 4 septiembre 2010 a las 0:39
Escribe tú comentario
*
*
» Mensaje: