Menús desplegables y CSS

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>

• Pestaña 1
• Pestaña 2
• Pestaña 3

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.