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 😄
Importancia de las animaciones web
5 razones para usar animaciones en la web
Conceptos iniciales
Propiedades para crear animaciones con CSS y propiedades animables
Pseudo-clases y pseudo-elementos en las animaciones
Timing functions, planos y ejes
Transformaciones en 2D y 3D
Transform translate
Transform rotate, scale, skew y matrix
Transform origin
Transform style y perspective
Backface visibility
Parallax con transformaciones
Efecto parallax: estructura HTML
Efecto parallax: estilos CSS
Transiciones
Transition property y duration
Transition timing function y delay
Tips de UX
Movimiento impulsado por la acción
Tiempos de espera
Problemas de parpadeo
Rendimiento y accesibilidad
Propiedades recomendadas y no recomendadas para animar
Aceleración de hardware y la propiedad will-change
Preferencias de movimiento reducido
Libros recomendados y próximos pasos
Continúa en el Curso de Animaciones con CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Tiempos de espera
15/20Recursos
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:
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ú.
Reto cumplido!!!
https://codepen.io/gusgq/pen/gOmvBzY?editors=1000
Aquí va el mio 😃
https://codepen.io/carolinadcode/pen/qBrPyba
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.