Posteado por: sipako | octubre 7, 2008

Pestañas con CSS, solo CSS !!!!

Pestañas con CSS

Pestañas con CSS

Hace algunos días me encargaron el diseño de un sitio web. Como siempre, las ideas tienen que comenzar a fluir, imaginar la interacción de los elementos, imágenes, animaciones, texto … y todas esas cosas bonitas que lo componen.

Si de algo se trata aquí es precisamente de crear cosas, al menos por mi no antes utilizadas, tratar de hacer diferente cada nuevo sitio que tengo que realizar.

Mi idea, como puede ser la de muchos, supongo, comienza con el diseño y maquetación con CSS. Creando patrones que posteriormente me ayuden con solo copiar y pegar para mantener la homogeneidad en cada una de las páginas de primer o segundo nivel.

Vamos a lo verdaderamente importante. El uso de pestañas es una técnica que realmente siempre me ha llamado la atención, y así quise hacer funcionar mi nuevo proyecto. Existen un sinfín de técnicas para realizarlas, con o sin imágenes, etc. Pero ese no era mi propósito, así que decidí poner manos a la obra con mi propia imaginación, y a decir verdad, no es nada complicado y seguramente ya hecho anteriormente por otras personas.

Primero que todo, utilizaremos una lista desordenada <ul> con una clase diferente, tal como lo muestra el siguiente código.

ul.menu {
    display:inline;
    list-style-type:none;
    font-weight:400;
    font-family:"Trebuchet MS", "Tahoma";
}

Lo que logramos aquí, será básicamente, lograr que nuestro menú se muestre de manera horizontal y quitando la viñeta que acompañará a cada uno de los elementos de la lista.

Posteriormente daremos formato a cada uno de los vínculos <a> contenidos en los elementos de la lista <li> para poder aplicar los efectos que CSS nos permite.

ul.menu li a:link, ul.menu li a:visited, ul.menu li a:active {
    float:left;
    padding:5px 12px;
    display:block;
    background:#0000b2;
    border:#0000b2 2px solid;
    color:white;
    text-decoration:none;
}

Las propiedades, en pocas palabras son: dar un color de fondo, pintar borders y dar un formato al texto, eliminando ese subrayado (en lo personal no me gusta ni tantito) mejor lo cambio de color para que siga pareciendo eso, un link. Y la parte más importante, el padding. El padding da un margen interno del elemento que tiene esa propiedad, respecto a la información que contendrá, en nuestro caso será el vínculo, y dará la sensación de asemejarse a un botón.

ul.menu li a:hover {
    float:left;
    padding:5px 12px;
    display:block;
    background:#0000ff;
    border:#0000ff 2px solid;
    color:white;
    text-decoration:none;
}

Aqui de manera similar, pero estas propiedades son válidas para cuando el cursor del mouse se posicione arriba de algún elemento de la lista gracias a la propiedad hover. Se aplican solo colores distintos, en mi caso mas claros, para lograr un efecto … sencillito pero que a mi me gusta. Hasta ahorita podria quedar así:

Pestañas con CSS

Pestañas con CSS

No es verdad !! Se fijan que el link activo está de color blanco ?? Para eso utilizaremos un truco, fácil por cierto. Se trata de crear una clase para el vínculo llamada actual, pero que ustedes le pueden poner como gusten. Se tratará de utilizarlo en la página que tenga un vínculo activo hacia ella misma. Fácil, no ?? Algo así:

    <div id="menus">
    <ul class="menu">
        <li><a class="actual" href="prueba.php">Vinculo 1</a></li>
        <li><a href="prueba2.php">Vinculo 2</a></li>
        <li><a href="prueba3.php">Vinculo3</a></li>
    </ul>
    </div>

En este ejemplo, este código HTML se utilizaría en el archivo llamado prueba.php. Y así, un menú con esa diferencia para cada página perteneciente al menú. Las propiedades para el actual serían algo así:

ul.menu li a.actual {
    float:left;
    padding:5px 12px;
    display:block;
    background:white;
    border:white 2px solid;
    color:#000066;
    text-decoration:none;
}

Si se fijan, será bueno utilizar un color que ayude al efecto de que nuestro contenido pertenece a esa pestaña activa, en mi caso utilicé el blanco, pero ustedes tendrán que utilizar el mismo que para el link activo. Con un poco de imaginación, y una barra de submenús, a mi me quedó así:

Implementación de las pestañas

Implementación de las pestañas

Realmente es un efecto sencillo, de carga rápida por simplemente utilizar CSS y que a la vez me agrada.

Puedes descargar desde aquí los archivos de ejemplo.

Anuncios

Responses

  1. Acepto hacer parte

  2. Pues me interesaria hacer parte de ustedes !me interesa¡


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: