No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tiempos de espera

15/20
Recursos

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!

Contribución creada por Andrés Guano.

Aportes 32

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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: https://codepen.io/paolojoaquin/pen/NWpvgzK

Me gustaría feedback, Gracias 😄

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

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ú:

Les comparto mi práctica.
https://codepen.io/davidosorio/pen/wvJyQmr

Holaaa este es el mioo 😄

* {
                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;
            }

🍿Tiempos de espera

❤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.

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!

Así quedó mi reto
Código

sugiero utilizar visibility en lugar de opacity

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.

Este es mi menu

¡Reto cumplido!

https://media.giphy.com/media/XN1asSQABomZZpocXQ/giphy.gif

Código :

<!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>

No habia tomado en cuento los tiempos de espera, muchas gracias por explicarlo

reto:

Así quedó mi menú. La verdad, es pero mejorarlo en próximos días.
![](

Increíble al nivel de detalle que se puede llegar con programación

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

Mujer, Hombre y Niño no debe estar dentro de una etiqueta anchor.

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.

¿por qué en vez de opaciti no se usa display:none; para ocultarlo?

Les dejo mi CodePen con la solucion CODIGO

Les comparto mi solución del reto 🤗:
enlace

Amo estos tipos de tips y truquitos. Siento que mi aprendizaje mejora y puedo experimentar con ello

asu, pense que era dificil pero esta easy :'v

Por fin lo logré!

https://giphy.com/gifs/M4d41UELBTUsOV2S70

Preferí no poner un menú dentro de otro menú.