Cada vez más aprecio las webs ligeras, especialmente cuando me quedo sin datos en el móvil o estoy en un sitio con mala conexión. Hace poco no pude leer un articulo porque el “leer más” iba por javascript y no llegaba a arrancar a pesar de que el contenido ya estaba cargado, seguia cargando .js y cosas que bloqueaban el arranque de JS (que no ocurre, en principio, hasta haber cargado todos los contenidos de la pagina).
Puede ser muy frustrante que un visitante no pueda desplegar un menú para llegar a la sección que le interesa porque la pagina está bloqueada cargando cosas que no necesita (y no vamos a entrar en las estadísticas discutibles de Google sobre los 3 segundos que puede aguantar un navegante esperando una carga)
Para evitarlo, esta es una forma de crear interacción que funciona desde el momento en que se renderiza la pagina, sin tener que esperar la carga de jquerys y demas y quedarse bloqueada la funcionalidad.
Se basa en el los selectores “~” que significa “aquellos elementos que comparten padre” (ojo, DESPUES del elemento referenciado) , y en “input:checked” .
El tema es colocar un <input> con opacity:0 para que no se vea, y colocado de forma absoluta dentro del elemento de menu con medidas al 100% para habilitar el pulsado de todo el botón. A partir de ahí, podemos aplicarle propiedades a sus “hermanos” así:
input ~ div: (sin pulsar, plegado)
input:cheked ~ div : pulsado(desplegado).
Combinado con transition se hacen animaciones suaves para el desplegado.
Esto tiene un problema, y es que si hay varios items de menú desplegables, no podemos hacer mediante css que al pulsar uno se plieguen los demás. He intentado hacerlo con elementos radio button, que solo permiten seleccionar uno de entre varios, pero hasta el momento no lo he conseguido.
Para resolverlo si que debemos usar una pequeño JS que deseleccione los demás items al pulsar uno de ellos, lo mas cómodo es usar .siblings() de Jquery en una función que deseleccione los demás inputs al seleccionar uno.
Si, acabamos usando JS, pero al menos ya se puede desplegar el menú sin esperas innecesarias desde el primer render de la pagina.
Aquí teneis un codepen sencillo explicando el concepto, en este caso se ha cambiado la opacidad del menu, pero se podria haber cambiado cualquier otra propiedad del <ul> o de los <li>s