JMiur [E]

Contenidos ocultos que se muestran con un click, pestañas, menús desplegables; para todo eso hay muchas variantes, códigos que los generan, scripts que los crean; algunos más simples, otros más sofisticados pero, en general, muchas de esas cosas pueden hacerse de manera manual si se entiende cómo funciona el CSS.

Un menú no suele ser otra cosa que una lista ordenada (etiquetas UL y LI) que, por defecto siempre se muestran una debajo de la otra pero, a las que podemos poner de manera horizontal:
<ul id="mimenu">
  <li><a href="#">Pestaña 1</a></li>
  <li><a href="#">Pestaña 2</a></li>
  <li><a href="#">Pestaña 3</a></li>
</ul>

Para hacer eso, tendríamos que tener reglas de estilo similares a estas.

/* la etiqueta UL */
#mimenu {
  /* definimos la fuente de los textos */
  font-family: Georgia;
  font-size: 24px;
  /* le damos altura y centramos el texto */
  height: 48px;
  line-height: 48px;
  text-align: center;
  /* reseteamos cualquier dato que tenga por defecto */
  list-style-type: none;
  padding: 0;
  /* le damos un ancho para centrarla */
  margin: 0 auto;
  width: 500px;
}

/* cada item está en una etiqueta LI */
#mimenu li {
  /* las colocamos una al lado de la otra */
  display: block;
  float: left;
  position: relative;
  /* las separamos entre si */
  margin: 0 3px;
  /* si queremos, las dimensionamos para que sean todas iguales */
  width: 120px;
  /* les damos cualquier característica gráfica */
  background-color: #6495ED;
  padding: 0 20px;
  text-align: center;
}

/* cuando coloquemos el cursor encima, cambiará el color de fondo */
#mimenu li:hover {
  background-color: #BFD6FF;
  /* le ponemos un border falso para evitar un bug de IE7 */
  border: 0px solid red;
}

/* lo que hay en esa lista son enlaces */
#mimenu li a {
  display: block;
  text-decoration: none;
  /* les damos las caracterísiticas gráficas que se nos ocurra */
  color: #BFD6FF;
  font-family: Georgia;
  font-size: 24px;
}

/* cuando coloquemos el cursor encima, cambiará el color del texto */
#mimenu li:hover a { color: #000; }

Hasta ahí, lo elemental, tenemos un menú de alguna clase pero, ahora, vamos a hacer que cada una de las pestañas se despliegue, mostrando cierto contenido; para eso agregaremos un DIV en cada item de la lista o en aquellos items que querramos expandir:
<ul id="mimenu">
  <li>
    <a href="#">Pestaña 1</a>
    <div class="micontenido">
      <!-- y aquí es donde pondremos el contenido de la primera pestaña -->
    </div>
  </li>
  <li>
    <a href="#">Pestaña 2</a>
    <div class="micontenido">
      <!-- y aquí es donde pondremos el contenido de la segunda pestaña -->
    </div>
  </li>
  <li>
    <a href="#">Pestaña 3</a>
    <div class="micontenido">
      <!-- y aquí es donde pondremos el contenido de la tercera pestaña -->
    </div>
  </li>
</ul>
Y necesitamos agregar las reglas de estilo para ese DIV:

/* este será el DIV oculto */
#mimenu .micontenido {
  /* al contenedor LI se le colocó position: relative así que a el contenido le ponemos position: absolute; para "moverlo" */
  position: absolute;
  /* y lo ocultamos "moviendolo" mucho, hasta sacarlo de la pantalla */
  left: -1000em; /* podemos usar cualquier valor alto, em o pixeles */
  /* le damos un ancho automático, igual al ancho de la pestaña */
  width: auto; /* si queremos que sean más anchas o más angostas les ponemos un valor */
  /* cualquier otra definición gráfica */
  background-color: #BFD6FF;
  padding: 5px;
}

/* y por último, haremos que ese contenido sea visible al poner el cursor encima de la etiqueta LI */
#mimenu li:hover .micontenido {
  /* como el contenido tiene una posición absoluta, lo "traemos" desde afuera y lo ponemos en su lugar */
  left: 0;
  top: 0;
}

  • Pestaña 1
    ejemplo
  • Pestaña 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  • Pestaña 3

Nulla ut malesuada neque! Donec et neque vel metus sollicitudin ultrices. Sed egestas dui non nisl adipiscing feugiat. Curabitur non nunc ut nisl fermentum imperdiet vel non tellus. Phasellus rhoncus, turpis ac eleifend pulvinar, justo nunc imperdiet ante, eget sodales mi magna ut leo. Nam mattis lectus lacus, hendrerit pharetra nisi.

Nulla pretium magna sit amet lorem venenatis convallis. In nibh libero, venenatis quis dapibus eu, accumsan in eros? Nulla non massa lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Curabitur eget ipsum eu lectus auctor tincidunt. Curabitur quis orci vitae libero lacinia volutpat. Nam sit amet dui nulla. Praesent rutrum, mi vitae commodo lacinia, felis eros tincidunt posuere.


Como se ve, el contenido desplegado se solapa a cualquier cosa que haya debajo pero, un detalle que siempre suele perturbar es cuando eso que hay debajo es un archivo de Flash como un video. En algunos casos, el video se ve por delante y eso se debe a las particularidades propias de estos objetos. Por lo general, eso se resuelve agregando el parámetro wmode en la etiqueta OBJECT:
<param name="wmode" value="transparent" />
En el ejemplo anterior podemos ver el resultado haciendo click en este enlace para agregar un video de YouTube en el demo.

21 comentarios:

Unknown  

Guouuu :D

Responder
Gem@  

Una maravilla :)

Responder
Beben Koben  

so nice bos ;)
eh bos Gema :$

Responder
JAHvier  

Huyyyy muy buen tuto...solo una consulta este menu es compatible con navegadores antiguos? como ie 8 7 6 o hay problemas con algun motor de renderizado ? gracias !!!

Responder
JMiur  

JAHvier:
Basta abrir un navegador y probar.
Funciona perfectamente em IE8 y en IE7 modo compatibilidad.
Desconozco si funciona en IE6 porque no es un navegador sino una reliquia :D

Responder
Gildo Kaldorana  

Gracias JMiur, a ver si de una vez por todas empiezo ese curso de CSS que siempre lo pospongo.
Saludos

Responder
Unknown  

Interesante lo de superponer el menu al video, alguna vez vi un video que se comía un pedazo de menu.

He visto en varios lugares el texto que parece tatuado o no se como llamarlo (como el que se muestra al desplegar la pestaña 2 del ejemplo). ¿Como se crea ese texto?, ¿es alguna fuente especifica o es un efecto logrado con css?

Responder
JMiur  

Eso que ves como resaltado en los textos es por el uso de la porpiedad text-shadow. En esta entrada se muestra la forma de usarla.

Responder
Unknown  

Sí, muy bueno el post. Y extraordinario el video. Te felicito.
Saludos.

Responder
Dracolio  

me podrian ayudar con mi menu lo tengo en mi pagina pero auno no sirve
http://www.origenlab.com
gracias por sus comentarios

JMiur  

No veo que hasyas colocado nada de lo que muestra esta entrada.

Responder
Pacheta  

Jmiur, a ver si puedes decirme por qué no me funciona este truco TAN ÚTIL en mi blog de pruebas, por favor:
http://pruebasdelamierdaperruna.blogspot.com.es/

Resulta que, al expandirse el contenido, en lugar de mostrarse de forma diferente, sale igual que el estilo de # mimenu.

Gracias por todo.

JMiur  

No sé a que te refieres con exactitud pero, si se trata de que el contenido de las pestañas tenga algún estilo especial, debes indicarlo expresamente creando las reglas.

Pacheta  

Quiero probar a ponerlo exactamente igual que como aparece en el ejemplo. Muestras un contenido que se ve perfectamente y tal. A mi no me sale no sé por qué. No sé cómo ponerlo para que se lea bien el contenido.

Gracias !

Responder
Pacheta  

No sé si me habré explicado con el anterior comentario... como creo que no porque me precipito, hehe pues te pongo este. Básicamente me gustaría saber cuál es el código que has usado para que muestre el texto entero de Lorem ipsum dolor sit amet, consectetuer adipiscing elit.... en el segundo bloque. ¿Cómo has conseguido que no se te mueva el texto y se salga del cuadrado?
GRACIAS !

JMiur  

Simplemente debes colocar el contenido (el texto o lo que sea) usando alguna etiqueta y estableciendo las propiedades para esa etiqueta, incluyendo un ancho (width) si se quiere que sea más ancho que la pestaña misma; un ejemplo:

<div class="micontenido">
<div style="color:black;line-height:1;text-align:left;width:300px;">
</div>
</div>

Pacheta  

Buenas de nuevo!

He conseguido hacerlo pero el cuadrado se corta de largo... No sé por qué ocurre esto, he probado a darle un height de 300px y aún así no funciona.
http://pruebasdelamierdaperruna.blogspot.com.es/

A ver si me puedes echar una mano y decirme qué sucede!

Muchas gracias por todo JMiur !

JMiur  

Eso te ocurre porque estás colocando el elemento HTML entro de un contenedor (header-wrapper) que tiene definida una altura (height:) y la propiedad overflow: hidden con lo que cualquier contenido que supere ese espacio, se cortará; deberías quitarle esa propiedad

Pacheta  

Gracias !! solucionado :) :)

Responder
Valcroce  

que bueno el tutorial, muy bien explicado, mi pregunta es cómo podría hacer que el submenú desplegable fuera translúcido.

JMiur  

Utilizando opacity o colores en formato rgba() en las porpiedades background.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR