Menús Interactivos con CSS: Uso de Hover y Focus Within

Optimizar una web sin necesidad de JavaScript es posible utilizando las pseudoclases de CSS. En esta ocasión conocerás cómo emplear específicamente hover y focus within para crear menús interactivos que no solo facilitan la navegación, sino que también ofrecen una experiencia visual agradable al usuario.

¿Qué pseudo clases permiten hacer interactiva una web sin JavaScript?

Las pseudoclases hover y focus within ofrecen la funcionalidad necesaria para manipular elementos cuando se produce una interacción específica:

• Hover: se activa cuando el cursor pasa por encima del elemento.
• Focus within: se activa cuando algún elemento interno tiene el foco, como al hacer clic.

Utilizadas conjuntamente, permiten definir y controlar eventos que tradicionalmente requerirían de códigos JavaScript.

¿Cómo crear un menú desplegable solo con CSS?

Para construir un menú interactivo sin utilizar JavaScript, debes controlar dos elementos básicos: el botón del menú y la lista que contiene las opciones del menú.

¿Cuál es la estructura HTML adecuada?

• Clase principal "menú": posicionada de forma relativa e inline-block, contiene todo el componente de navegación.
• Botón del menú: muestra al usuario que existe un menú desplegable.
• Lista de opciones: al principio se muestra oculta, luego desplega opciones al activar hover o focus.

¿Qué estilos CSS base necesitan los elementos?

Los elementos deben configurarse así inicialmente para lograr el efecto deseado:

• Posicionar el contenedor (menú) de forma relativa para controlar mejor las referencias de sus hijos.
• El botón puede personalizarse con colores, sin borde y un cursor distinto para indicar interacción.
• A la lista de opciones (menú list) se le define una posición absoluta, un color de fondo, padding, borde y otros estilos visuales para diferenciarlo del botón.

¿Cómo controlar la visualización del menú con hover y focus within?

El núcleo de esta técnica radica en controlar dos propiedades específicas:

• Opacidad y escala vertical: empiezan escondiendo la lista por defecto.
• Al activarse hover o focus within, la opacidad pasa al 100% y la escala vertical se restablece, desplegando el menú con una transición suave y agradable visualmente.

La sintaxis del CSS sería la siguiente:

.menú:hover .menú-list,
.menú:focus-within .menú-list{
  opacity: 1;
  transform: scaleY(1);
}

De esta forma, logras que el menú se visualice correctamente al pasar el cursor o al presionar el botón del menú.

¿Cuál es la ventaja de combinar hover y focus within?

La combinación de estas pseudoclases aporta flexibilidad:

• Utilizando hover tienes una respuesta inmediata al pasar el cursor sobre el botón.
• Con focus within aseguras que al hacer clic el menú permanezca visible sin necesidad de mantener el cursor encima.

Esta combinación mejora significativamente la experiencia del usuario.