Cursos Empresas Blog Live Conf Eventos Precios

0:0014:12

Recursos

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.

Ejemplo usando tiempos de espera en menús desplegables.

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.

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Curso de Transformaciones y Transiciones en CSS

Clase 15 / 20

Ver clases

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Curso de Transformaciones y Transiciones en CSS

Clase 15 de 20

Clase 15 / 20

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Curso de Transformaciones y Transiciones en CSS

Clase 15 / 20

Ver clases

Comentarios

Paolo Joaquin Pinto Perez#2593863

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: scrnli_27_5_2021 00-01-05.png Me gustaría feedback, Gracias :D

Camilo Torres camayo#2612574

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

Joalbert Milano#2872716

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

Juan David González Rodríguez#2596142

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

<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style2.css">
   <title>Document</title>
   <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chevron_right" />
</head>

<body>
   <nav>

   </nav>
   <ul class="nav">
      <li>
         <a href="#">Mujer</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
      <li>
         <a href="#">Hombre</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
      <li>
         <a href="#">Infantil</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
   </ul>
</body>

</html>

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

Comentarios

Paolo Joaquin Pinto Perez#2593863

Camilo Torres camayo#2612574

Joalbert Milano#2872716

Juan David González Rodríguez#2596142

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

<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style2.css">
   <title>Document</title>
   <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chevron_right" />
</head>

<body>
   <nav>

   </nav>
   <ul class="nav">
      <li>
         <a href="#">Mujer</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
      <li>
         <a href="#">Hombre</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
      <li>
         <a href="#">Infantil</a>
         <ul>
            <li>
               <a href="#">Camisetas
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Pantalones
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span>
               </a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>
            <li>
               <a href="#">
                  Shorts
                  <span class="material-symbols-outlined">
                     chevron_right
                  </span></a>
               <ul>
                  <li><a href="#">Cortos</a></li>
                  <li><a href="#">Largos</a></li>
                  <li><a href="#">Transparentes</a></li>
               </ul>
            </li>

         </ul>
      </li>
   </ul>
</body>

</html>

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

Comentarios (48)48 comentarios

Paolo Joaquin Pinto Perez

Hace 5 años

Me gustaría feedback, Gracias :D

Irving Juárez

Esta bien, pero creo que estan un poco pegadas los ul

Jonathan Andres Vasquez Valle

Genial, gracias por lo de visibility.

Puse en lugar de

opacity:0

esto:

visibility: hidden;

Y cambié:

opacity:1

por

Camilo Torres camayo

Víctor Hugo Torres Fierro

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

Joalbert Milano

Luciano Cavallo

Genial Joalbert! Me gusto mucho como te quedo! 👍👌👍

Mateo Javier Rojas Céspedes

Hace 4 años

que genial como usaste scale para desaparecer la lista

Juan David González Rodríguez

Aaron Joel Limachi Quispe

Me gustó tu diseño retro 😎👍

Carlos Mendieta

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.

Kevin Yari Almiron

Hace 7 meses

Opino igual, si el curso hubiese sido todo en un mismo documento habria espacio para aprender mas cosas...

Angel David Osorio Leyva

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

Hola Angel!

Muy profesional el menú! Te quedó muy bien.

Gracias!, saludos.

Carlos Mazzaroli

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

Gonzalo Ceron Denetro

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:

. Comentario Final Hay shorts transparentes? Y donde puedo conseguir unos?

Carlos Rodríguez

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!

Leobardo Manuel García Cruz

sugiero utilizar visibility en lugar de opacity

Phillip Leonardo Cabrera Medrano

Este es mi menu

Martha Liliana Dominguez Gonzalez

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.

Juan Gustavo Daza Martínez

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

Andres Silva Vega

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

Eleazar Ramos Cortes

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

Pedro Alexander Perez

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

Cristina Muñiz

Hace 3 años

Aqui dejo mi pequeño diseño

JOSE MARIA SUAREZ GIESE

Hace 2 años

Aquí mi solución, bastante minimalista

Moises Hernandez

Hace un año

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.

Hoja de estilos:

Ejemplo:

Kenneth Angulo L

Hace 3 meses

Excelente aporte gracias.

De esa forma el elemento ya no es visible y ya no podemos interactuar con el.

La solucion que la profora propone sacarlo del DOM, se logra pero con JS, con CSS no podemos lograrlo.

document.querySelector('.elemento')?.remove();

Ever Raúl Chávez chavarria

Hace 4 meses•editado

Hola!! me ha encantado este curso, mis conocimientos de CSS no son muy avanzados pero me ha gustado todo este tema de las transiciones y Transformaciones, comparto mi avance

Recursos

Resumen

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Progreso del curso

Importancia de las animaciones web

Conceptos iniciales

Transformaciones en 2D y 3D

Parallax con transformaciones

Transiciones

Tips de UX

Rendimiento y accesibilidad

Libros recomendados y próximos pasos

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Recursos

Resumen

Comentarios

Holaaa este es el mioo :D

Recursos

Resumen

Comentarios

Holaaa este es el mioo :D

🍿Tiempos de espera

❤Que problemas podemos evitar con tiempos de espera?

🧡Que logramos con un tiempo de espera?

Conclusion de esta clase: