Comprender el desplegable flotante
La interfaz de ajustes llama al desplegable flotante Dropup menu, pero su dirección final es adaptativa. POM Translate mide el conmutador, el menú y el área de visualización cuando se abre el control.
Reglas de colocación
El menú se abre por encima del conmutador cuando:
- su altura supera el espacio disponible debajo; y
- hay más espacio arriba que abajo.
De lo contrario, se abre por debajo. Horizontalmente, se alinea a la derecha cuando la alineación a la izquierda desbordaría el área de visualización y la alineación a la derecha cabe.
La medición se repite mientras un selector abierto se ve afectado por el redimensionamiento de la ventana o el desplazamiento.
Límites de tamaño integrados
El menú desplegable utiliza:
- una anchura basada en su contenido;
- una anchura mínima igual al conmutador;
- una anchura máxima limitada por el área de visualización;
- una altura máxima limitada por el área de visualización;
- desplazamiento interno cuando la lista de idiomas es más alta.
El propio desplegable flotante está fijado cerca de la esquina inferior derecha. Su margen interior se reduce ligeramente en áreas de visualización de hasta el punto de ruptura móvil de WordPress de 782 píxeles.
Comportamiento de interacción
- Al hacer clic en el conmutador se abre o se cierra.
- Al abrir un desplegable de POM Translate se cierra otro que esté abierto.
- Al hacer clic fuera se cierra.
Enter,Space,ArrowDownoArrowUplo abre y enfoca el primer idioma habilitado.Escapecierra los selectores abiertos.aria-expandedcambia con el estado visual.
Probar diseños restringidos
Utiliza el zoom del navegador y anchuras estrechas para reproducir el espacio más reducido probable. Confirma que el menú permanece visible por encima de otras capas del diseño, que sus enlaces de idioma pueden desplazarse y que no se superpone a una acción de consentimiento que el visitante deba alcanzar.
No fuerces una dirección de apertura con CSS del tema a menos que también vuelvas a probar los atributos de colocación medidos por el plugin.