Introducción

La pseudo-clase :checked de los elementos checkbox y radiobutton puede ser muy útil para simular eventos clic con CSS y sin javascript. En este artículo veremos algunos casos de usos, principalmente relacionados con toggle buttons de menús.

1° Ejemplo: menú emergernte de navbar

En este primer ejemplo podemos ver que al hacer clic sobre el avatar de usuario, emerger el menú con más opciones.

Para realizar este efecto utilizamo un elemento checkbox. El menú emergente tiene un display: none; como valor inicial. Los siguiente estilos son los que realizan el efecto.

#toggle:checked ~ .menu {
  display: block;
}

Esta regla indica que cuando el elemento checkbox con el ID toggle esté :checked entonces el elemento .menu tendrá un display: block; . Este es el efecto más básico con la pseudo-clase :checked.

2 ° Ejemplo: slide menu

En este ejemplo, cuando hacemos clic sobre el avatar del usuario, un menú se desliza desde la derecha.

Este ejemplo es muy similar al anterior. En lugar de manipular la propiedad display, manipulamos la propiedad right del elemento. El elemento .menu tiene una regla inicial right: -300px; para que el menú este fuera de la pantalla. Al hacer clic sobre el avatar modificamos este valor a 0.

Tenemos un detalle más, cuando entra el menú, se coloca sobre el avatar, impidiendo que podamos hacer clic nuevamente sobre él. Entonces, ¿como manipulamos el checkbox para la salida del menú? Hacemos uso elementos label . Estos elementos tienen un atributo for con el que podemos vincularlo con el checkbox por medio de su ID, y podemos vincular más de un label a un checkbox. Aprovechando esta característica, tenemos dos elementos label. Uno sobre el avatar para la apertura del menú, y otro dentro del menú para el cierre.

3° Ejemplo: Menú acordión

En el menú acordión tenemos un menú principal, y cuando hacemos clic sobre alguna de las opciones, se despliega un submenú.

Para poder realizar este efecto, manipulamos la altura del submenú. Los valores iniciales son:

.submenu {
    height: auto;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
}

Al tener la regla max-height de 0, el submenú no se ve. Luego manipulamos estas reglas como sigue.

.menu__check:checked + .submenu {
  max-height: 600px;
}

Esta regla indica que queremos manipular la propiedad max-height del elemento .submenu adyacente al elemento checked. Para que esto funcione, debemos colocar el input checkbox justo sobre el elemento que queremos manipular.

4° Ejemplo: Menú con pestañas

En este ejemplo hacemos uso de elementos radio buttons. Una característica de este elemento es que solo uno de un grupo de radio buttons puede estar seleccionado. Aprovechando esta característica, podemos utilizarlo para mostrar componentes sólo cuando alguno de estos radio buttons tenga la pseudo-clase :checked.

Cada una de las opciones en el navbar son labels cuyo valor for los vincula a cada radio buttons. Sólo uno puede estar seleccionado. Los elementos que queremos mostrar estan dentro de un elemento article cuyo valor inicial para display es none.

El código que realiza el truco es.

.tabs__input:checked + .article {
      display: flex;
      align-items: flex-start;
      gap: 5px 30px;
      flex-wrap: wrap;
}

Colocamos cada uno de los elementos radio buttons justo antes del elemento que queremos manipular, en este caso el elemento article. Cuando el radio button este :checked cambiamos la propiedad display: flex; del elemento .article adyacente. Para suavizar la entrada del elemento article añadimos una animación fade en el cual operamos la propiedad opacity.

Conclusión

Hemos visto como la pseudo-clase :checked puede ser muy versátil para manipular las reglas de estilos de otros elementos. Estos ejemplos son bastantes básicos, pero nada impide que puedas realizar efectos más complejos. Todo lo que esté al alcance de tu creatividad. Confío en que este artículo te ayude para que lo incorpores a tus proyectos y te sirva de inspiración para crear otros efectos más atractivos.

Espero que lo hayas encontrado entretenido, instructivo y claro. Si tienes alguna duda, puedes hacérmelo saber en los comentarios. Pronto estaré subiendo más tutoriales.

Nos vemos en la próxima. Saludos!👋😊