Sistema #css para ocultar/mostrar contenido con clic. Menú desplegable | Oloblogger 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 eleme...

22 de diciembre de 2015

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.

Menú desplegable


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")

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
Copy URL

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

follow us in feedly

13 comentarios :

  1. Muchas gracias. Excelente como siempre tus ayudas.

    ResponderEliminar
  2. Hola Oloblogger, como estas?? acudo a ti por que tengo un GRAN problema con mi plantilla, al parecer esta algo enredada en los codigos por que resulta que cuando coloco el fanbox de acebook no se ve, o cuando coloco la caja de comentarios tampoco se ve, incluso al colocar la caja de comentarios predeterminada de blogger tampoco se ve...... sera que puedes echar un vistazo y ayudarme?? seria de gran ayuda para mi pues muchas cosas en mi blog no estan funcionando o no se ven, y esto me tiene loco, tengo dias revisando la plantillla y no consigo solucion, estoy desesperado, nesecito la ayuda de un profesional, porfavor agradeceria tu ayuda!!. muchas gracias!! saludos!! :)
    PD: te dejo el link: http://www.lamagiadeabba.com/
    escribeme un privado si puedes: lamagiadeabba@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola. Los comentarios de Blogger si veo que te funcionan. No obstante, si necesitas un trabajo personal, mejor me escribes mediante este formulario.

      Eliminar
  3. Este blog http://www.aguaysig.com/ tiene un diseño bastante parecido al tuyo...

    ResponderEliminar
    Respuestas
    1. Pues sí, aunque ya me sonaba haberlo visto alguna otra vez ¿Qué le vamos a hacer? ;)

      Eliminar
  4. Muchísimas gracias!! Venía buscando esto desde hace bastante tiempo *q* En serio, eres el mejor;)

    ResponderEliminar
  5. Hola pero cuanto bien nos hacer por lo menos ami gracias. Saludos

    ResponderEliminar
  6. Saludos Oloman... primero que todo agradecer como siempre por tu excelente trabajo.... siempre haciendonos la vida muy facil a los que somos blogger..

    segundo como siempre .. necesito de tu ayuda.. y es lo siguiente:
    resulta que cambie la plantilla de mi blog para este año como lo hago de costumbre... pero ayer me encontre con la sorpresa de que en donde esta el menú debajo del header.. al hacer clik en cualquiera de los nombre estos abren pero no en su totalidad.. es decir.. donde dice: Indice, Staff, etc etc abren pero no como se debe abrir una pagina para mostrar su contenido... y la verdad no se como solucionar esa parte... te agradeceria enormemente me echaras una mano con semejante problema... de antemano mil gracias por todo... y esperare esa ayuda ... mientras seguire buscando en la web a ver con que me encuentro un abrazo !!!!!

    mi blog y diculpame por el spanm.. http://joralgom1.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Me tendrías que explicar qué quieres decir con "abren pero no es su totalidad" y "no como se debe abrir una página para mostrar su contenido". Yo veo que al pinchar, el enlace me lleva a la correspondiente página y te aseguro que eso es lo normal.

      Eliminar
    2. Saludos Oloman.. se me olvido avisar que lo pude solucionar.. mil y mil gracias por tomarte la molestia de contestarme... un abrazo !!!!

      Eliminar
  7. graciasss. se me hizo muy util este ejemplo.

    ResponderEliminar
  8. Gracias por tu esto, me sirvió de mucho para un proyecto en el que estoy trabajando.

    ResponderEliminar