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

Clase 15 de 20 • Curso de Transformaciones y Transiciones en CSS

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.

Paolo Joaquin Pinto Perez

student•

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

Irving Juárez

student•

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

Jonathan Andres Vasquez Valle

student•

Genial, gracias por lo de visibility.

Puse en lugar de

opacity:0

esto:

visibility: hidden;

Y cambié:

opacity:1

por

visibility: hidden;

Camilo Torres camayo

student•

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

Víctor Hugo Torres Fierro

student•

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.

Camilo Torres camayo

student•

@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

student•

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

Luciano Cavallo

student•

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

Mateo Javier Rojas Céspedes

student•

que genial como usaste scale para desaparecer la lista

Juan David González Rodríguez

student•

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

Aaron Joel Limachi Quispe

student•

Me gustó tu diseño retro 😎👍

Carlos Mendieta

student•

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.

Angel David Osorio Leyva

student•

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

Víctor Hugo Torres Fierro

student•

Hola Angel!

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

Saludos.

Angel David Osorio Leyva

student•

Gracias!, saludos.

Carlos Mazzaroli

student•

🍿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

student•

Así quedó mi reto Código

Irving Juárez

student•

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?

Carlos Rodríguez

student•

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

student•

sugiero utilizar visibility en lugar de opacity

Phillip Leonardo Cabrera Medrano

student•

Este es mi menu

Martha Liliana Dominguez Gonzalez

student•

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

student•

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

student•

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

student•

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

Pedro Alexander Perez

student•

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

Pedro Alexander Perez

student•

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

Araceli Gomez Navarrete

student•

Guido Nicolas

student•

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

Jesús Enrique Sotelo García

student•

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

Moises Hernandez

student•

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.

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

Hoja de estilos:

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

Ejemplo:

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

Importancia de las animaciones web

Transiciones y Transformaciones CSS: Beneficios y Aplicaciones

Conceptos iniciales

Propiedades Animables en CSS: Transform y Transition

Pseudoclases y Pseudoelementos en CSS: Uso y Ejemplos Prácticos

Funciones de Temporización y Planos en Animaciones CSS

Transformaciones en 2D y 3D

Transformaciones 2D y 3D en CSS: Uso de la Propiedad Transform

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Propiedad Transform Origin en CSS: Modificación del Eje de Rotación

Transformaciones 3D en CSS: Propiedades y Ejemplos Prácticos

Propiedad CSS Backface Visibility: Uso y Ejemplos Prácticos

Parallax con transformaciones

Implementación del Efecto Parallax con HTML y CSS

Estilización y Transformaciones en Efecto Parallax con CSS

Transiciones

Transiciones CSS: Transition Property y Transition Duration

Propiedades avanzadas de transiciones CSS: Timing Function y Delay

Tips de UX

Transiciones de Movimiento en Elementos Web

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

Solución de Parpadeo en Hover con CSS y HTML

Rendimiento y accesibilidad

Propiedades CSS óptimas para animaciones eficientes

Aceleración de Hardware y Uso de WillChange en Animaciones

Accesibilidad Web: Implementación de Reduce Motion en Animaciones

Libros recomendados y próximos pasos

Recomendaciones de Libros sobre Animaciones en CSS