Tiempos de espera

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

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

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

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.

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

sugiero utilizar visibility en lugar de opacity

Así quedó mi reto
Código

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

Hola este es mi solucion al reto, una especie de clon del header de Platzi:

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 idea
nav {
	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:

//buena idea
nav {
	visibility:hidden;
	opacity:0;
	transition: opacity 400ms;
}
nav:hover{
	visibility:visible;
	opacity:1;
}

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

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

Con el display:block y display:none tambien se puede controlar para resolver el bug del opacity

Reto cumplido
https://codepen.io/Dani-rios/pen/XWYNMmo

Comparto mi código HTML

<!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>
</head>
<body>
  <ul class="nav">
    <li><a href="/">Hombre</a>
      <ul>
        <li><a href="">Camisetas</a></li>
        <li><a href="">Pantalones</a></li>
        <li><a href="">Chaquetas</a></li>
      </ul>
    </li>
    <li><a href="/">Mujer</a>
      <ul>
        <li><a href="">Camisetas</a>
          <ul class="tallas">
            <li><a href="">Talla XS</a></li>
            <li><a href="">Talla S</a></li>
            <li><a href="">Talla M</a></li>
            <li><a href="">Talla L</a></li>
          </ul>
        </li>
        <li><a href="">Pantalones</a></li>
        <li><a href="">Chaquetas</a></li>
        <li><a href="">Shorts</a></li>
      </ul>
    </li>
    <li><a href="/">Niño</a>
      <ul>
        <li><a href="">Camisetas</a></li>
        <li><a href="">Pantalones</a></li>
        <li><a href="">Chaquetas</a></li>
        <li><a href="">Shorts</a></li>
      </ul>    
    </li>
  </ul>
</body>
</html>

Y cóodigo CSS

*{
  margin: 0;
  padding: 0;

}

ul{
  list-style: none;
  padding-left: 0;
}

li{
  padding-left: 0;
}

a{
  text-decoration: none;
}

.nav{
  display: flex;
  margin: 20px 10px;
}

.nav li {
  margin: 0 10px;
}


.nav li:hover > ul{
  opacity: 1;
  visibility: visible;
}

.nav li ul{
  display: block;
  opacity: 0;
  position: absolute;
  transition: opacity 400ms;
  transition-delay: 300ms;
  visibility: hidden;
}

.nav li ul li{
  position: relative;
  
}

.tallas{
  
  display: inline-block;
  width: 100px;
  margin: 0 70px;
  padding: 0px; 

}

Eh aquí mi reto completado 😄

Agregue letras con un efecto neon, aun hay mucho más que mejorar pero como primera decoración me parece bien.

Aquí les dejo mi navbar
Aquí

Mucho por mejorar pero mi pequeño aporte.

HTML

<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <ul class="nav">
            <li>
                <a href="#">Mujer</a>
                <ul>
                    <li>
                        <a href="#">Camisetas</a>
                    </li>
                    <li>
                        <a href="#">Pantalones</a>
                    </li>
                    <li>
                        <a href="#">Short</a>
                        <ul>
                            <li>
                                <a href="#">Cortos</a>
                            </li>
                            <li>
                                <a href="#">Largos</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Hombre</a>
            </li>
            <li>
                <a href="#">Niños</a>
            </li>
        </ul>
    </main>
</body>
</html>

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

html{
    font-size: 62.2%;
    font-family: "Roboto", sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 1.5rem;
}
ul{
    list-style: none;
}
a{
    color: white;
    text-decoration: none;
}
.nav{
    width: 100%;
    display: flex;
    place-content: space-evenly;
}
.nav li ul{
    opacity: 0;
    position: absolute;
    transition: opacity .3s, visibility .3s;
    transition-delay: .3s;
    visibility: hidden;
    
}
.nav li:hover > ul{
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility .3s;
    transition-delay: .3s;
}
.nav li ul li{
    position: relative;
}
.nav li ul li{
    right: -45px;
}
li{
    width: 70px;
    margin-block-start: 4px;
    margin-block-end: 4px;
    border: 1px solid black;
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(70deg, HotPink, DeepPink, MediumVioletRed);
}

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

done
https://cricadev.github.io/Desktop/curso-transform-transition/wait-time/index.html

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

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

mi aporte https://codepen.io/pen/tour/welcome/start?editors=1100

Reto cumplido!!!
https://codepen.io/gusgq/pen/gOmvBzY?editors=1000

Aquí va el mio 😃
https://codepen.io/carolinadcode/pen/qBrPyba