Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables
Resumen
En algunos menús desplegables, intentas seleccionar una opción pero se cierra el menú y debes hacer el mismo hasta seleccionar lo que deseas.
Los tiempos de espera solucionan este problema, se refiere a usar una duración entre el usuario deje de seleccionar el elemento y se cierre el menú. Usar tiempos de espera ayuda al usuario a no frustrarse con los menús.
Utiliza la propiedad transition-delay para que los elementos esperen un tiempo determinado entre que el usuario deje de seleccionar el menú hasta que se cierre completamente.
El ejemplo no es perfecto, usa tus conocimientos de CSS para crear tu propio menú desplegable con tiempos de espera. ¡Comparte tu trabajo en la sección de aportes!
Reto cumplido!!
El problema con el nav-bar cuando el cursor todavía NO estaba sobre el item, era porque solo le dabamos effecto de que los items estaban ocultos, pero solo tenian opacidad 0, y solo debiamos ocultarlo con la propiedad visibility.
Visibility: Esta propiedad de visibilidad especifica si un elemento es visible o no.
Código:
Me gustaría feedback, Gracias :D
Esta bien, pero creo que estan un poco pegadas los ul
Genial, gracias por lo de visibility.
Puse en lugar de
opacity:0
esto:
visibility: hidden;
Y cambié:
opacity:1
por
visibility: hidden;
Un poco de practica
Trate de darle transition a la propiedad display a los iconos y no me los reconocía, entonces me toco ponerle position y opacity para poder ocultar el contenido.
Recibo feedback
Coidgo: https://codepen.io/camilo315853/pen/NWpyLwo?editors=0100
Hola Camilo!
Está súper ese menu; sólo me surge una duda en el CSS:
Cuando se corrije la posición, se rompen los botones. ¿Es necesaria entonces esta propiedad?
Saludos.
@Vtorres Gracias
Buen análisis, ya lo corregí.
No es necesaria esa propiedad porque en la clase icon ya esta con el position absolute
Listo mi reto xd.
Le añadí algunas cosas que he ido aprendiendo a la largo de mi ruta de aprendizaje en otros cursos y algunas cosas aprendidas en este.
Código: https://codepen.io/joalbert-milano/pen/qBjmqxb
Mi menú:
Genial Joalbert!
Me gusto mucho como te quedo! 👍👌👍
que genial como usaste scale para desaparecer la lista
Holaaa este es el mioo :D
*{ box-sizing: border-box;margin:0;padding:0; font-size: 2rem;color: #fff; font-family: monospace
} ul { list-style: none;} a { text-decoration: none;}.header{width:100%;height: 100px;background: #0046e2;}.nav{display: flex; max-width: 800px; justify-content: space-around; align-items: center;width:100%;height:100%;}.nav li{padding: 6px; border-radius: 8px;}.nav li ul {width: 500px;height: auto;background: #0046e2;display: block;position: absolute;opacity:0;transition: opacity 1s; transition-delay: 300ms;}.nav li:hover {background: #000000;}.nav li:hover > ul {opacity:1;transition: opacity 1s; transition-delay: 300ms;}.nav li ul {left: 100px;}.nav li ul li {position: relative;}
Me gustó tu diseño retro 😎👍
Lástima que fue una clase tan apresurada. Con un poquito mas de estilo y paciencia se pudo haber creado un headergenial y completo. No veo necesario que todas las clases tenga que durar tan poco, si tardamos 1 hora haciendo el header pero aplicando todo lo aprendido hasta el momento sería mejor.
Mejor aun, si todo el curso se basara en realizar el header desde la clase uno sería increíble.
Lastima.
Opino igual, si el curso hubiese sido todo en un mismo documento habria espacio para aprender mas cosas...
❤Que problemas podemos evitar con tiempos de espera?
Que se cierra un menú desplegable de manera abrupta
Que el usuario no llegue al apartado que este buscando
Que el usuario tenga una mala experiencia
🧡Que logramos con un tiempo de espera?
Que el menu desplegable se vea mas bonito
Una mejor experiencia de usuario o UX
Que el acceso a todas las secciones sea muy fácil.
Así quedó mi reto
Código
Conclusion de esta clase:
.
Cuando queremos hacer un menú desplegable, hay que jugar con el factor del tiempo, para que la experiencia del usuario (UX) sea mucho mas amena. Con esto podemos evitar
Que se cierra un menu desplegable de manera abrupta
Que el usuario no llegue al apartado que este buscando
Que el usuario tenga una mala experiencia
.
Ademas, con esto logramos:
Que el menu desplegable se vea mas bonito
Una mejor experiencia de usuario o UX
Que el acceso a todas las secciones sea muy fácil.
.
Comentario Final
Hay shorts transparentes? Y donde puedo conseguir unos?
Creo que lo mejor es hacerlo por clases por lo menos en el primer nivel ya que cuando agreguemos items a esos niveles se va a hacer hover en varios niveles al mismo tiempo y nos frustaremos en que se seleccione un sólo nivel!
sugiero utilizar visibility en lugar de opacity
Este es mi menu
Uff, siempre quise saber por qué pasaba lo del nav bar, pero no lo había indagado. Es molesto y pasa en muuuchas páginas.
Sinceramente es el ejercicio que más me ha costado de CSS en todo lo que llevo de la ruta pero es que noté que en lugar de utilizar o visibility, quise usar display: none y block para esconder totalmente del mapa al elemento y al hacer hover que se volviera block pero el transition: display no lo acepta.
Realmente no sé porqué, al final pude lograrlo con transform: rotate pero me pareció curioso esto de display o tal vez hice algo mal.
Me frustré mucho tiempo por ese simple hecho jaja
Note al hacer el ejercicio que cuando se usa opacity:0 todos los elementos están ahí pero no se ven. Si tenemos una persiana con varios elementos y estos a su vez tienen hijos se van a sobreponer unos sobre otros y será dificil navegar el menu. Aparentemente la solución podria ser cambiar opacity por display:
// mala ideanav {display:none
}nav:hover{display:block
}
Pero display no dispone de transición, por tanto se puede cambiar display por visibility y seguir usando opacity sobre el que se ejecuta la transición:
¿por qué en vez de opaciti no se usa display:none; para ocultarlo?
Hola !!
Yo pienso que ese sería el método de la profesora porque te cuento que me dio curiosidad tu pregunta y lo realice con display:none e igual me funciono para ocultarlo, saludos y nunca pares de aprender
Si bien, la propiedad Display: none; nos ayuda a ocultarlo, he investigado que esta propiedad no puede ser transicionable, este puede ser el motivo por el cual ella puso opacity en lugar de display
Saludos!!! 😅✌
Hola este es mi solucion al reto, una especie de clon del header de Platzi:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> body { box-sizing: border-box;margin:0;padding:0;} ul { list-style: none;} a { text-decoration: none;}.nav{display: flex;}.nav> li { margin-left: 20px;padding: 15px 25px; background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); border-radius: 10px;}.nav li ul{display: block;opacity:0;position: absolute;transition: opacity 500ms, visibility 500ms; transition-delay: 400ms;visibility: hidden;}.nav li:hover > ul {opacity:1;transition: opacity 500ms, visibility 500ms; transition-delay: 400ms;visibility: visible;}.nav li ul li{position: relative;}.nav li ul li{margin: 5px 0;padding: 10px 5px;top: 20px; background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); text-align: center; border-radius: 10px;}</style></head><body><header><ul class="nav"><li><a href="">Mujer</a><ul><li><a href="">Camisetas</a></li><li><a href="">Pantlones</a></li><li><a href="">Shorts</a><ul><li><a href="">Cortos</a></li><li><a href="">Largos</a></li><li><a href="">Transparantes</a></li></ul></li></ul></li><li><a href="">Hombre</a></li><li><a href="">Niños</a></li></ul></header></body></html>
El problema del nav de la clase es que usa display block opacity 0 y esto esta mal ya que solo oculta para la vista del usuario el elemento pero sigue ahí y para el cursor sigue siendo perceptible. Este problema puede ocasionar problemas para el usuario ya que podría dar click en un menu del item sin que el lo haya querido.
Una forma de arreglar este problema es usar visibility hidden y opacity para el efecto lo que permite que aunque en el dom existan los submenus estos no puedan ser clickeables por el usario por error ya que solo seran visibles y clickeables al hacer hover según se requiera.
*{ box-sizing: border-box;margin:0;padding:0;}body {background: #333; font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS', sans-serif;}ul { list-style: none; margin-left: 12px;}a {color: white; font-size:1.1rem; text-decoration: none;padding: 8px 12px;}.nav{display: flex;width:100%;gap: 12px;background: #222;padding: 12px;}.nav li {position: relative;}.nav ul li {display: flex;width:100%;width:100%;padding: 4px;}.nav ul {width: auto;position: absolute;top:100%; background-color: #5a5454;transition: all 0.3s linear;}.nav li ul {visibility: hidden;display: flex; flex-direction: column;width: 150px; text-align: center;padding: 4px;margin: 4px; border-radius: 4px;}.nav li ul li a {display: flex;width:100%; justify-content: end; align-items: center; text-align: center;}.nav li ul li ul {left:100%;top:0;display: flex; flex-direction: column;visibility: hidden;opacity:0;transition: all 0.2s linear;}.nav li ul li:hover ul {visibility: visible;opacity:1;transition: all 0.2s linear;}li:hover>ul {visibility: visible;transition: all 0.5s linear;}li a:hover { background-color: red;}
