Sistema #css para ocultar/mostrar contenido con clic. Menú desplegable

Aquí ya se han publicado muchos artículos en los cuales se conseguía algún tipo de efecto cuando se pasaba el puntero por encima de un elemento. Esto es algo relativamente sencillo de hacer porque sólo se trata de aplicar un estilo CSS para el estado normal del elemento y otro distinto para ese mismo elemento en estado :hover.

Sin embargo, desde que los dispositivos táctiles llegaron a nuestra vida y, sobre todo, desde que se han hecho un gran hueco en Internet, el :hover en algunas ocasiones se nos queda corto, ya que este tipo de cacharritos generalmente responden a esa acción de posar nuestro dedo sobre algo sólo como sinónimo de hacer clic, haciendo prácticamente inútil atacar el selector con :hover.

Por eso hoy veremos una manera utilizando sólo CSS de mostrar algo oculto con un clic. Lo haremos usando un botón radio (input) como elemento auxiliar y aprovechando su posible estado :checked (seleccionado) para el segundo juego de propiedades.

Al final del artículo podréis ver como ejemplo de uso un menú abatible con enlaces a redes sociales.

Para hacer esto necesitamos un botón radio y su correspondiente etiqueta. La idea general es ocultar el input que lo forma para que estéticamente no moleste y dejar sólo su etiqueta (label) como botón de activación, ya que ambos reaccionan igualmente al clic como un todo y con la etiqueta es más fácil crear con CSS un formato personalizado.


Aquí podeís ver el código básico para lo de ocultar/mostrar con un checkbox:

<input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar">Clic para ver contenido</label>
<div class="desplegable">
  Aquí podría ir cualquier tipo de elemento
</div>

#activar ~ .desplegable {display: none;overflow: hidden;}
#activar:checked ~ .desplegable {display: block;}

Es importante que el input y su correspondiente label, tengan el mismo nombre (activar en el ejemplo), entre otras cuestiones porque ambos elementos pueden ir separados sin problema intercalados por otro código cualquiera y esa es la clave que permite relacionar uno con otro. Además de esos dos lo único que necesitamos es una caja con el contenido que pretendemos activar con el botón.

En el CSS lo que hemos hecho es usar el selector correspondiente al botón (#activar) e indicar que su hermano (~) que es la caja con el contenido (.desplegable), inicialmente se oculte. Luego utilizamos el estado :checked para que cuando se pincha en el input, la caja y su contenido se haga visible.

Este sería el resultado.
(Nótese que es indiferente pinchar en el botón o en su etiqueta "Clic para ver contenido")

Clic para ver contenido

Aquí podría ir cualquier tipo de elemento

Ahora vamos a jugar un poquito con el estilo para que esto tenga una pinta más mona.

Usaremos el mismo HTML pero sin ninguna leyenda dentro del label. Las nuevas reglas CSS que veréis después, en este mismo orden...

• Esconden el checkbox para que sólo se vea su etiqueta
• Cambian el aspecto de la etiqueta para que se asemeje más a un botón
• Añaden un texto ("Abrir") a la etiqueta en el estado normal del checkbox
• Esconden el contenido oculto y le dan un poquito de forma y color
• Muestran el contenido oculto cuando se activa el checkbox
• Añaden un texto distinto ("Cerrar") a la etiqueta cuando el checkbox está activado

#activar {display: none;}
.inputlabel {display: inline-block;height: 20px;line-height: 20px;padding: 5px 10px;background: #000;color: #fff;}
#activar ~ .inputlabel:before {content: "ABRIR"}
#activar ~ .desplegable {display: none;overflow: hidden;padding: 10px 20px; background: #000;color: #fff;}
#activar:checked ~ .desplegable {display: block;}
#activar:checked ~ .inputlabel:before {content: "CERRAR"}

Y con todo eso obtenemos:

En fin, el truco es ese y ya dependiendo del aspecto que le deis al conjunto, el lugar dónde lo situéis y el tipo de contenido que ocultéis, pues así será el resultado. Este que viene a continuación está orientado a relacionar las propias redes sociales, pero bien puede ser adaptado con poco trabajo para cualquier otro tipo de menú.

Lo puse embebido desde Codepen, así que como en otras ocasiones, podéis trastear con él para probar cosillas.

See the Pen Solapa superior desplegable con clic #css by Oloman (@oloman) on CodePen.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter