Caja con multiples pestañas

junihh · #1 (**permalink**) 28/01/2009, 22:02

Hola señores

Estoy rediseñado mi blog basado en WP. El caso es que la mayoria –incluyendo mis antiguos blog– adolecen de tener una barra lateral demasiado larga, que a mi parecer lo afean. Me gustaria esa barra con una caja de multiples pestañas por ser una forma elegante e inteligente de mostrar el contenido y ahorrar espacio.

La idea es similar a la que pueden encontrar aqui. Es esa caja bajo Buscar que dice Popular, Comentarios...

No me interesa que me den el codigo, me interesa que me sugieran enlaces con tutoriales donde poder aprender a hacerlo, ya que al aprender me servira para eventualmente poder aplicar a otros trabajos mios o de mis clientes de forma mas personalizada.

Se que hay algunas web que tienen ese efecto usando javascript. Seria posible alguna version de ese efecto solo con CSS, sin necesidad de JS u obligatoriamente debe tenerlo ???

Gracias por cualquier sugerencia, links o ideas que puedan ofrecerme.

Rafael · #2 (**permalink**) 28/01/2009, 23:16

Más o menos se puede, el problema es que al momento de quitar el ratón de la parte hover, el objeto oculto desaparece. El javascript lo que hace es dejarle la propiedad "pegada".

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>a span {display: none;}
a:hover span {display: block; position: absolute; top: 200px;}
</style>
</head>

<body>
<a href="#">Hola<span>Escondido</span></a>

</body>
</html>

Rafael · #3 (**permalink**) 28/01/2009, 23:20

Acá hay una variante a ver que tal.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
a {display: block; width: 100px; height: 100px; background-color: #F00;}
a span {display: none;}
a:hover span {display: block; position: absolute; top: 100px; width: 100px; height: 100px; background-color: #0F0;}
</style>
</head>

<body>
<a href="#">Hola<span>Escondido</span></a>

</body>
</html>

Pero no podemos meter un a dentro de otro a o sea no podemos meter links dentro.
La propiedad hover a veces funciona en ciertos navegadores, en ese caso si se podría meter links en el cuadro verde, al no usar a:hover, sino div:hover, pero no es múy estándard que digamos.

Mikmoro · #4 (**permalink**) 29/01/2009, 02:18

Mira, aquí tienes tres ejemplos de cómo se puede hacer sólo con CSS, en la sección central "ELEMENTOS", pero esos ejemplos son sólo ilustrativos, porque como te dice Rafael, no usan enlaces dentro de enlaces.

Se puede hacer, sin duda, pero para eso habría que combinar esos ejemplos con esta otra técnica

No sería demasiado difícil, pero ahí tienes material para investigar. Si me animo un día de estos lo hago y así ya se queda hecho el ejemplo.

junihh · #5 (**permalink**) 29/01/2009, 07:18

@Rafael: Aunque no es lo que busco esta bastante interesante lo que me muestras, asi que me lo quedo ya que estoy formando una libreria de CSS para lo que sea necesite.

@Mikmoro: Esos ejemplos son muy impresionantes. Justo se encuentra lo que necesito y justo como lo queria. Ya antes habia visto el ejemplo del truco sin esquinas redondeadas pero no conocia de donde procedia. Esos ejemplos los puedo usar para mi libreria... claro, no todos para no plagiar.

A ambos muchisimas gracias por su colaboracion y ayuda, me han valido muchisimo.

Mikmoro · #6 (**permalink**) 29/01/2009, 08:12

Puedes usar lo que quieras: todos los códigos de esta página son libres sin ningún tipo de licenica ni restricción.

Saludos.